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.
Cambiar el orden
Los elementos se pueden poner en el orden que desees mediante la definición de los templates, o con areas, pero existe otra manera usando la propiedad order, que también se usaba con las flexbox.
Order funciona de una manera similar a z-index pero en lugar de usarse para poner un elemento sobre otro, se utiliza para ponerlos uno a continuación de otro. Por defecto todos los elementos del grid tiene el mismo orden podríamos decir que este es orden es 0
Si colocas un elmento con order 2 se colocará despues de que se halan situado todos los elementos con orden 1, los items con order 3 se colocarán cuando estén situados los elementos con order 2. Si dos items tienen el mismo orden se usa el orden en que se escribieron en la página o e indicado por area.
<style>
.grid-caja{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:5px;
}
.grid-caja>div{
border:1px solid blue;
background:lightgreen;
transition: all 1000ms;
}
.grid-caja>div:nth-child(1){order: 4}
.grid-caja>div:nth-child(2){order: 2}
.grid-caja>div:nth-child(3){order: 1}
.grid-caja>div:nth-child(4){order: 3}
.grid-caja>div:nth-child(5){order: 5}
.grid-caja>div:nth-child(6){order: 6}
.grid-caja>div:nth-child(7){order: 7}
.grid-caja>div:nth-child(8){order: 8}
.grid-caja>div:nth-child(9){order: 9}
</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>Item num 6</div>
<div>Item num 7</div>
<div>Item num 8</div>
<div>Item num 9</div>
</div>
Personalizar el rellenado de una cuadrícula Grid usando order