Filas de igual altura en el diseño de cuadrícula CSS

101

Entiendo que esto es imposible de lograr usando Flexbox, ya que cada fila solo puede tener la altura mínima requerida para adaptarse a sus elementos, pero ¿se puede lograr usando la nueva CSS Grid?

Para ser claros, quiero la misma altura para todos los elementos en una cuadrícula en todas las filas, no solo para cada fila. Básicamente, la "celda" más alta debe dictar la altura de todas las celdas, no solo las celdas en su fila.

Hlsg
fuente

Respuestas:

188

Respuesta corta

Si el objetivo es crear una cuadrícula con filas de igual altura, donde la celda más alta de la cuadrícula establece la altura para todas las filas, aquí hay una solución rápida y simple:

  • Coloque el recipiente en grid-auto-rows: 1fr

Cómo funciona

Grid Layout proporciona una unidad para establecer longitudes flexibles en un contenedor de rejilla. Esta es la frunidad. Está diseñado para distribuir el espacio libre en el contenedor y es algo análogo a la flex-growpropiedad en flexbox.

Si establece todas las filas en un contenedor de cuadrícula en 1fr, digamos así:

grid-auto-rows: 1fr;

... entonces todas las filas tendrán la misma altura.

Realmente no tiene sentido desde el principio porque frse supone que distribuye el espacio libre. Y si varias filas tienen contenido con diferentes alturas, cuando el espacio se distribuya, algunas filas serán proporcionalmente más pequeñas y más altas.

Excepto , enterrado profundamente en la especificación de la cuadrícula está esta pequeña pepita:

7.2.3. Longitudes flexibles: la fr unidad

...

Cuando el espacio disponible es infinito (lo que sucede cuando el ancho o la altura del contenedor de cuadrícula es indefinido), las frpistas de cuadrícula de tamaño flexible ( ) se ajustan a su contenido conservando sus respectivas proporciones.

El tamaño utilizado de cada pista de cuadrícula de tamaño flexible se calcula determinando el max-contenttamaño de cada pista de cuadrícula de tamaño flexible y dividiendo ese tamaño por el factor de flexibilidad respectivo para determinar un " 1fr tamaño hipotético ".

El máximo de esos se usa como la 1frlongitud resuelta (la fracción de flexión), que luego se multiplica por el factor de flexión de cada pista de cuadrícula para determinar su tamaño final.

Entonces, si estoy leyendo esto correctamente, cuando se trata de una cuadrícula de tamaño dinámico (por ejemplo, la altura es indefinida), las pistas de la cuadrícula (filas, en este caso) se ajustan a su contenido.

La altura de cada fila está determinada por el max-contentelemento de cuadrícula más alto ( ).

La altura máxima de esas filas se convierte en la longitud de 1fr.

Así es como 1frcrea filas de igual altura en un contenedor de cuadrícula.


Por qué flexbox no es una opción

Como se señaló en la pregunta, las filas de igual altura no son posibles con flexbox.

Los elementos flexibles pueden tener la misma altura en la misma fila, pero no en varias filas.

Este comportamiento se define en la especificación de flexbox:

6. Líneas flexibles

En un contenedor flexible de varias líneas, el tamaño cruzado de cada línea es el tamaño mínimo necesario para contener los elementos flexibles en la línea.

En otras palabras, cuando hay varias líneas en un contenedor flexible basado en filas, la altura de cada línea (el "tamaño cruzado") es la altura mínima necesaria para contener los elementos flexibles en la línea.

Michael Benjamin
fuente
En el párrafo mencionado, ¿qué significa exactamente esta porción: "y dividiendo ese tamaño por el factor flexible respectivo para determinar un" tamaño hipotético de 1fr "? Por ejemplo, si el tamaño más alto en la primera fila de un contenedor de cuadrícula era 100px y el grid-auto-rowde esa fila era 2, ¿significa esto que el tamaño de 1fr para la primera fila es igual a 50px?
Od Chan