En uno de nuestros anteriores tutoriales de introducción a CSS Grid abordamos columnas fluídas y mejores medianiles. Aprendimos que no es necesario especificar exactamente dónde queremos posicionar nuestros elementos de la grilla; si declaramos nuestras propiedades de la grilla, Grid acomodará nuestros elementos de acuerdo a su algoritmo de colocación automática.

En éste tutorial, veremos cómo ese algoritmo hace su trabajo y cómo podemos infuenciarlo.

Configurar

Si tu navegador no está configurado para soportar Grid necesitarás arreglar eso para continuar. Lee ésto:

• 

  CSS Grid Layout: Una Guía de Inicio Rápido

  La forma en cómo enfocamos el maquetado en la web está cambiano, y en principal responsable de ese cambio es CSS Grid Layout (Maquetado de Grilla CSS). Ésta guía de inicio rápido omitirá los detalles y...

Comenzó Con una Grilla

Aquí está un demo para tener una base; es un contenedor que hemos declarado tenga display:grid; y contenga 18 elementos hijos. Hemos señalado que debería tener cinco columnas, todas del mismo ancho, al menos la misma cantidad de filas, y un medianil estrecho de unos 2px.

1

  grid-template-columns: repeat(5, 1fr);

2

  grid-template-rows: repeat(5, 1fr);

3

  grid-gap: 2px;

Hasta ahora todo bien, y puedes ver que Grid ha tomado nuestros dieciocho elementos y los ha colocado, trabajando desde la parte superior izquierda, moviéndose a la derecha, luego moviéndose hacia abajo fila por fila. Éste comportamiento es casi igual a la forma a como funcionan los floats.

Nota: el comportamiento izquierda-a-derecha sería invertido si fuéramos a utilizar un maquetado con direction: RTL;

Poniendo un Obstáculo en el Camino

Todo eso es fabuloso, pero veamos lo que ocurre cuando nuestros elementos no encajan de manera perfecta. A .item-7 agregaremos algunas reglas para hacerlo más grande al extenderlo dos columnas y dos filas:

1

.item-7 {

2

  background: #e03f3f;

3

  grid-column: span 2;

4

  grid-row: span 2;

5

}

¿Cómo se ve ahora?

¡No está mal! .item-7 cubre más espacio, así que .item-8 y .item-9 son colocados más lejos. .item-10 entonces busca ver si hay un espacio vacante junto a .item-9 y cuándo ve que no hay, se mueve hacia abajo una fila y comienza de nuevo en la extrema izquierda. Los otros elementos continúan metiéndose de la misma manera.

Pero espera, ¿qué tal si también si hacemos .item-9 con un poco de sobrepeso?

Ahora se pone interesante; item-9 ya no encaja en la columna al final así que es empujado a la próxima fila. Como no puede encajar en ningún lado más alla de .item-7 continúa en su lugar. .item-10, podrías imaginar, se colocaría debajo de .item-6 de nuevo, pero, si recuerda, busca una columna vacante, luego al no encontrarla se mueve hacia abajo una fila y se se dirige a la izquierda otra vez. Éste es un concepto importante para asimilar.

Saluda a grid-auto-flow

Si viste el demo previo verás que .item-18, al no encontrar espacio junto a .item-17, se ha movido hacia abajo una fila. Sólo definimos cinco filas, pero Grid ha asumido que vamos a querer otra fila. Ésto se debe a grid-auto-flow, que pertenece al elemento de grilla, y cuyo valor por defecto es row . Podemos cambiar éste valor a column si queremos, lo que alteraría la forma en que se ve nuestra grilla:

Éso se ve algo similar, pero notarás que nuestros elementos se han ido a la parte superior izquierda, luego se movieron hacia abajo para llenar la fila, posteriormente se movieron hasta la segunda columna y así sucesivamente. Así que ahora cuando un elemento es demasiado grande para su espacio asignado, el siguiente elemento busca el espacio en la siguiente fila vacante, luego al no poder va a la siguiente columna.

Dense Tiene Sentido

Podemos agregar otra palabra reservada a nuestra propiedad grid-auto-flow, y es posiblemente mi palabra reservada favorita de CSS hasta la fecha: dense . Su contraparte predeterminada es sparse (mi segunda favorita). Hagamos lo siguiente:

1

grid-auto-flow: row dense;

Nota: no necesitamos incluir row aquí, está implícito, pero ésto resalta cómo funciona la sintaxis.

Ahora nuestro amigo .item-10, al encontrar que no hay espacio junto a .item-9, primero revisa lo que hay arriba antes de moverse a otra fila.

Gracias a éste cambio en el algoritmo de colocación nuestros elementos están ahora densamente cargados, lo que nos da una grilla más eficientemente llena. Ésto si significa, sin embargo, que el maquetado visual no necesariamente refleja el orden original del documento, que no siempre puede ser útil para el usuario.

Conclusión

Recapitulemos:

1. Si no hemos definido específicamente la ubicación de un elemento, el algoritmo colocación automática de Grid lo colocará en el próximo espacio (y suficientemente grande) disponible.
2. Dónde no haya espacio disponible en la fila actual, comenzará a buscar en la siguiente fila, aún si ello deja huecos.
3. Podemos cambiar éste orden de búsqueda alterando grid-auto-flow de row a column.
4. grid-auto-flow acepta una palabra reservada para describir el planteamiento de "cargado". Por defecto éste valor es sparse, pero podemos alterar ésto a dense que intenta cubrir todas los huecos disponibles.
   

Recursos Útiles

• grid-auto-flow en MDN
• La especificación de la propiedad grid-auto-flow