> Faqs > Puedo conseguir el comportamiento flex-grow en un display grid ¿?

Puedo conseguir el comportamiento flex-grow en un display grid ¿?

Usando Flexbox tengo costumbre de usar el atributo flex-grow cuando quiero que una columna se expanda para usar todo el espacio sobrante disponible.

Ahora, en un diseño con display: grid tengo una necesidad similar y quisiera que una de las celdas se ajuste usando todo el espacio disponible. ¿Es posible usar flex-grow o algo similar en CSS Grid Layout?

Pero un detalle: Mi distribución de la rejilla está con columnas y lo que quiero es que una de las celdas use todo el espacio disponible. Yo tengo esto:

.layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    column-gap: 1.5rem;
}

Lo que me ocurre es que el aside (definido a 360px de ancho) todas las celdas distribuyen su altura según su contenido y el contenido de la celda central. Una de las celdas que tengo en el aside es la que quiero que crezca usando todo el espacio disponible en la altura de la rejilla. Es decir, que tudas las celdas de esa columna ocupen el espacio que deberían según su contenido y la otra celda (flex-grow equivalente) ocupe todo el resto.

Espero que se entienda.

Respuestas

El atributo flex-grow solo funciona con Flexbox, por lo que no lo puedes aplicar directamente a Grid Layout.

De todos modos, el mismo comportamiento de comentas de 1fr, que has aplicado a las columnas es posible aplicarlo para conseguir lo mismo que haces con flex-grow.

  • 1fr indica que tome todo el espacio disponible. Es lo mismo que flex-grow: 1;
  • Si tienes varios 1fr se dividirían el espacio proporcionalmente entre ellos, lo mismo que si tienes varios flex-grow: 1
  • 2fr sería que ocupe proporcionalmente 2 veces el espacio disponible que tendrían los elementos con 1fr. Es lo mismo que flex-grow: 2.

Como estás usando 1fr para dividir el espacio en tus columnas creo que no tendrás problema en entender el concepto. Lo que creo que te hace falta es entender también que puedes perfectamente dividir el espacio de las filas, con las mismas propiedades, incluso puedes definir la división de espacios de filas y columnas al mismo tiempo en la misma rejilla. Es realmente muy versátil.

.mi-grid {
    display: grid;
    grid-template-columns: 1fr 390px;
    grid-template-rows: 200px 1fr;
    column-gap: 1.1rem;
    margin: 0 1rem;
}

Por ejemplo, en este caso estamos aplicando una rejilla de dos columnas... pero además estamos diciendo cómo se van a distribuir los espacios las filas. La primera usará el espacio de 200px y la segunda el restante.

Lo puedes combinar con todas las unidades fr que necesites y por supuesto con todas las filas que sean necesarias para adaptar los elementos de tu rejilla. El resultado es lo mismo que si tuvieras los elementos con flex-grow, pero con CSS Grid. Creo que en este artículo te pueden aclarar mejor las unidades fr.

Nadia
123 5 10 3

Las unidades "fr" del atributo grid-template-columns o grid-template-rows equivalen a ponerle el flex-grow al elemento que quieres que crezca.

La única diferencia es que en flexbox, el atributo flex-grow se lo pones en los elementos hijo y en css grid layout se lo tienes que colocar en el element padre, que tiene display grid.

Borja
175 4 13 10