Flash Sale Up to 40% off unlimited courses & creative assets Up to 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. CSS Grid Layout

Comprendiendo el "Algoritmo de Colocación Automática" de CSS Grid

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Going Responsive With auto-fill and minmax()
Quick Tip: Name Your CSS Grid Lines, Just in Case

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

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

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.

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:

¿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:

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

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.