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