Llenando el CSS 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 (por defecto).
Luego, al definir como se irán colocando los items el orden s¡que se siga (por filas o por columnas) vendrá dado por este parámetro.
En la página de el ejemplo del visor vas a ver como se llenan o disponen los items en el Grid
Colocando los items: auto y manual
La propiedad grid-auto-flow controla si el navegador coloca los items 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)
En este ejemplo puedes ver como colocar los items a tu gusto en el orden que mejor veas. Se han usado areas. 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.