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.
grid-auto-rowde esa fila era 2, ¿significa esto que el tamaño de 1fr para la primera fila es igual a 50px?La respuesta corta es que la configuración
grid-auto-rows: 1fr;en el contenedor de la cuadrícula resuelve lo que se preguntó.https://codepen.io/Hlsg/pen/EXKJba
fuente