Crea tu web, tutor html, css

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.

 
 
La disposición de los items puede automatizarse en dos formas: por filas o por columnas

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>

Personalizar el rellenado de una cuadrícula Grid

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.

Para colocar los items en la cuadricula podemos dejar que el navegador haga el trabajo basándose en el orden en que aparecen en el documento HTML o podemos colocarlos a mano identificnado cada celda como un area.