tablas - Filas de igual altura en el diseño de cuadrícula CSS
grid css responsive (3)
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:
-
Establezca el contenedor en
grid-auto-rows: 1fr
Cómo funciona
El diseño de cuadrícula proporciona una unidad para establecer longitudes flexibles en un contenedor de cuadrícula.
Esta es la unidad
fr
.
Está diseñado para distribuir espacio libre en el contenedor y es algo análogo a la propiedad
flex-grow
en flexbox.
Si configura todas las filas en un contenedor de cuadrícula a
1fr
, digamos así:
grid-auto-rows: 1fr;
... entonces todas las filas tendrán la misma altura.
Realmente no tiene sentido desde el principio porque se supone que
fr
distribuye espacio libre.
Y si varias filas tienen contenido con diferentes alturas, cuando se distribuye el espacio, algunas filas serían proporcionalmente más pequeñas y más altas.
Excepto , enterrado en las especificaciones de la cuadrícula está esta pequeña pepita:
...
Cuando el espacio disponible es infinito (lo que ocurre cuando el ancho o la altura del contenedor de la cuadrícula es indefinido), las pistas de cuadrícula de tamaño flexible (
fr) se dimensionan según su contenido mientras conservan sus proporciones respectivas.El tamaño utilizado de cada pista de cuadrícula de tamaño flexible se calcula determinando el tamaño de
max-contentde cada pista de cuadrícula de tamaño flexible y dividiendo ese tamaño por el factor de flexión respectivo para determinar un "tamaño hipotético1fr".El máximo de esos se usa como la longitud resuelta de
1fr(la fracción de flexión), que luego se multiplica por el factor de flexión de cada pista de la 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 dimensionan según su contenido.
La altura de cada fila está determinada por el elemento de cuadrícula más alto (
max-content
).
La altura máxima de esas filas se convierte en la longitud de
1fr
.
Así es como
1fr
crea 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:
En un contenedor flexible de varias líneas, el tamaño transversal 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.
Entiendo que esto es imposible de lograr con Flexbox, ya que cada fila solo puede tener la altura mínima requerida para ajustar sus elementos, pero ¿se puede lograr esto con la nueva cuadrícula CSS?
Para que quede claro, quiero la misma altura para todos los elementos en una cuadrícula en todas las filas, no solo por cada fila. Básicamente, la "celda" más alta debe dictar la altura de todas las celdas, no solo las celdas de su fila.
La respuesta corta es esa configuración de
grid-auto-rows: 1fr;
en el contenedor de cuadrícula resuelve lo que se pidió.
Puede usar porcentajes para
grid-template-rows
manera
grid-template-rows: 50% 50%;