Llenando el Grid
Las celdas del grid, una vez definidas, deben llenase con los items hijos, esto puede hacerse automáticamente con dos estrategias:
Llenar en vertical: por columnas.los items se va colocando hasta llenar una clumna luego se pasa a la siguiente
Llenar en horizontal: por filas, primero se llena una fila y luego se pasa a la siguiente hasta terminar.
Colocando los items: auto y manual
La propiedad grid-auto-flow controla si el navegador coloca los itnms con el contenido comenzando por columnas o por filas.
Es algo parecido al modelo flexbox donde se puede distribuir bloques en forma horizontal o vertical (flex-direction), pero en el modelo Grid el reparto de bloques es bidimensional.
Los valores posibles para esta propiedad son column y row, que pueden ir seguidas de la palbra clave dense.
auto-flow: column: simplemente llena la primera columna, luego la siguiente.
auto-flow: row: simplemente llena la primera fila, luego la siguiente hata tener todo el contenido. Es el valor por defecto.
El llenado siempre es de arriba abajo y de izquierda a derecha.
Al añadir la palabra dense el algoritmo de llenado intenta rellenar los huecos que puedan quedar antes de continuar con el orden indicado (row o column)
<style>
.grid-caja{
display: grid;
grid-gap:5px;
grid-template-areas: 'i5 i1' 'i3 i4' 'i2 .';
line-height:50px;
text-align:center;
font-family: Arial;
font-size: 16px
}
.grid-caja>div{
border:1px solid blue;
background:aliceblue;
}
.grid-caja>div:nth-child(1){grid-area: i1}
.grid-caja>div:nth-child(2){grid-area: i2}
.grid-caja>div:nth-child(3){grid-area: i3}
.grid-caja>div:nth-child(4){grid-area: i4}
.grid-caja>div:nth-child(5){grid-area: i5}
</style>
<div class="grid-caja">
<div>Item num 1</div>
<div>Item num 2</div>
<div>Item num 3</div>
<div>Item num 4</div>
<div>Item num 5</div>
</div>
En este ejemplo puedes ver como colocar los items a tu gusto en el orden que mejor veas. Muy útil cuando quieres reordenar una colección de imégenes, o para adaptarte a una pantlla distinta.