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

Supongo que esto es imposible de lograr con Flexbox, ya que cada fila solo puede tener la altura mínima requerida para ajustarse a sus elementos, pero ¿se puede lograr esto utilizando la nueva cuadrícula CSS?

Para ser 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 debería dictar la altura de todas las celdas, no solo las celdas de su fila.

Respuesta corta

Si el objective 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 sencilla:

  • Establezca el contenedor en grid-auto-rows: 1fr

Cómo funciona

Grid Layout 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 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 sobre la marcha porque se supone que fr distribuye el espacio libre. Y si varias filas tienen contenido con diferentes alturas, cuando se distribuya el espacio, algunas filas serían 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 unidad fr

Cuando el espacio disponible es infinito (lo que sucede cuando el ancho o la altura del contenedor de la grilla es indefinido), las trazas de la grilla de tamaño flexible ( fr ) se clasifican según su contenido sin perder sus proporciones respectivas.

El tamaño utilizado de cada tramo de cuadrícula de tamaño flexible se calcula determinando el tamaño de max-content de cada tramo 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ético de 1fr “.

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 grilla para determinar su tamaño final.

Por lo tanto, si estoy leyendo esto correctamente, cuando se trata de una cuadrícula de tamaño dynamic (por ejemplo, la altura es indefinida), las pistas de la cuadrícula (filas, en este caso) se clasifican 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ñala en la pregunta, las filas de igual altura no son posibles con flexbox.

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

Este comportamiento se define en la especificación flexbox:

6. Flex Lines

En un contenedor flexible multilínea, 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 establecer grid-auto-rows: 1fr; en el contenedor de la red resuelve lo que se le preguntó.

https://codepen.io/Hlsg/pen/EXKJba

 

I am listed first in source order.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

.flexbox { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; } .flexbox .col { flex: 1; } .flexbox .col:nth-child(1) { background: #ccc; order: 1; } .flexbox .col:nth-child(2) { background: #eee; order: 0; } .flexbox .col:nth-child(3) { background: #eee; order: 2; }

La propiedad de alinear elementos se puede configurar para que se estire para asegurarse de que tengan la misma altura, ¡pero ese es el valor predeterminado! Entonces no tenemos que configurarlo en absoluto.

para más información: https://css-tricks.com/fluid-width-equal-height-columns/