¿Cómo establecer el ancho máximo de una columna en CSS Grid Layout?

este problema se puede tratar de variadas formas, pero nosotros te dejamos la que para nosotros es la resolución más completa.

Solución:

has entendido mal minmax función. Primero intenta aplicar el valor máximo y cuando eso no es posible, aplica el mínimo.

Entonces, para arreglar su diseño, solo necesita calcular 20% del ancho de su contenedor, aplíquelo usando max-width propiedad para su elemento de cuadrícula, y use auto en tus grid-template-columns definición de propiedad para la segunda columna. Manifestación:

div 
  outline: 1px dotted gray;


.container 
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr auto;


.container > :nth-child(2) 
  max-width: 60px; /* 20% x 300px */

  

    some content
  
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  



  

    some content
  
  

Actualización: se utilizará una solución más flexible fit-content función de esta respuesta.

“La función de ajuste de contenido acepta un parámetro, el valor máximo. Una columna/fila de cuadrícula con esta propiedad establecida seguirá ocupando el mínimo espacio necesario, de acuerdo con su contenido, pero no más que el valor máximo”.

Vea este artículo: ¡Conviértase en un CSS Grid Ninja!

Puede resolver su caso sin dejar de utilizar máximos basados ​​en porcentajes:

div 
  outline: 1px dotted gray;


.container 
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr fit-content(20%);


.container div 
  overflow: hidden; /* this needs to be set so that width respects fit-content */

  

    some content
  
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  



  

    some content
  
  

Es posible que deba configurar el max-width en el propio contenedor y deje que su columna se establezca en auto.

div,
aside 
  border-style: solid;


#container 
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr auto;


aside 
  max-width: 60px; /* 60px is 20% of 300px*/
  /* max-width:20%; 20% of window's */
  font-size: 0;
  transition: 0.25s;


#container:hover aside 
  font-size: 1em;

  

    Hover it to see aside grow till 20% average width
  
  

Utiliza Nuestro Buscador