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>

Usando order para personalizar el llenado de la 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.

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

 

Una forma de alterar el orden natural del llenado es la propiedad order. Se refiere al orden relativo en que se colocan los contenidos: ordenes altos van después de órdenes bajos exactamente un