grid-auto-flow: CSS Grid :: dirección flexible: Flexbox

Al configurar un elemento principal en display: flex, sus elementos secundarios se alinean de izquierda a derecha de esta manera:

Ahora, una de las cosas interesantes que podemos hacer con flexbox es cambiar la dirección para que los elementos secundarios se apilen verticalmente uno encima del otro en una columna. Podemos hacerlo con la flex-directionpropiedad (o con la flex-flowabreviatura):

Está bien, genial. ¿Pero cómo haría algo como esto con CSS Grid? Es decir, digamos que quiero que todos esos elementos secundarios estén alineados así:

1 3 5 7--------2 4 6 8

…en lugar de esto:

1 2 3 4--------5 6 7 8

De forma predeterminada, cuando configura un elemento principal para usar CSS Grid, los elementos se ubicarán de izquierda a derecha como Flexbox. En el siguiente ejemplo, le digo a la cuadrícula que tenga 6 columnas y 2 filas, luego dejo que los elementos secundarios llenen cada columna de la primera fila antes de llenar las columnas de la segunda. Ya sabes, comportamiento de ajuste de línea estándar.

.parent {  display: grid;  grid-template-columns: repeat(6, 1fr);  grid-template-rows: repeat(2, 150px);  gap: 20px;}

Básicamente, lo que quiero aquí es lo contrario: quiero que nuestros elementos secundarios llenen la columna 1, la fila 1 y la fila 2, y luego pasen a la siguiente columna. En otras palabras, ¡ajuste de columnas! Sé que si creo una cuadrícula con filas y columnas, podría colocar esos elementos individualmente en esas posiciones. Al igual que:

.parent {  display: grid;  grid-template-columns: repeat(6, 1fr);  grid-template-rows: repeat(6, 150px);}.child-1 {  grid-column: 1;  grid-row: 1;}.child-2 {  grid-column: 1;  grid-row: 2;}.child-3 {  grid-column: 2;  grid-row: 1;}/* etc, etc. */

¡Está bien, genial! Esto me da lo que quiero, pero es una gran molestia tener que establecer individualmente la posición de cada elemento. Se siente como si estuviera consumiendo position: absolutey no me siento particularmente inteligente. Entonces, ¿qué pasaría si simplemente quisiera que este diseño se hiciera por mí, de modo que cada nuevo elemento secundario se alineara en el lugar correcto… correctamente?

Lo que estoy preguntando (creo) es esto: ¿existe una versión CSS Grid de flex-direction: column?

Bueno, después de buscar un poco, Rachel Andrew me señaló la respuesta correcta en su excelente campo de juego, Grid by Ejemplo. Y como puedes ver en esta demostración, Rachel nos muestra cómo hacer precisamente eso:

¡Bien! Rachel hace esto con la grid-auto-flowpropiedad: le dice a un contenedor de cuadrícula cómo llenar el espacio desocupado con elementos secundarios. Entonces puedo hacerlo simplemente escribiendo esto:

.parent {  display: grid;  grid-auto-flow: column;  /* set up columns and rows here */}

De forma predeterminada, los elementos secundarios de una cuadrícula llenarán cada columna hasta que se llene una fila, luego fluirán hacia la siguiente debajo de ella. Es por eso que el valor predeterminado grid-auto-flowestá configurado rowporque primero llenamos las filas de la cuadrícula. Pero si lo configuramos en column, entonces cada nuevo elemento llenará todo el espacio de la columna 1 antes de pasar a la columna 2, etc.

.parent {  display: grid;  grid-auto-flow: column;  grid-template-columns: repeat(6, 1fr);  grid-template-rows: repeat(2, 150px);}

Esto es lo que significa la parte de flujo grid-auto-flowy durante mucho tiempo ignoré la propiedad porque parecía (no te rías) aterradora. Sólo leer la palabra grid-auto-flowes suficiente para darme ganas de apagar mi computadora portátil y caminar hacia el océano.

¡Pero! Es una propiedad bastante útil y tiene mucho sentido, especialmente si la consideras como la versión CSS Grid de flex-direction.