El diseño de una página web es mucho más que la decoración de elementos. El posicionamiento de elementos HTML en una página web es igual de importante que su estética para la experiencia de usuario. Por ello, hay muchos sistemas de posicionamiento de elementos que nos permiten crear layouts novedosos y complejos; CSS Grid es uno de ellos. En esta ocasión, te presentamos la propiedad grid-auto-flow de CSS Grid, una propiedad que multiplica las posibilidades que tenemos a la hora de disponer de los elementos de nuestra página web.
¿Cómo funciona la propiedad grid-auto-flow de CSS Grid?
En nuestro post sobre el posicionamiento avanzado con CSS Grid aprendimos que este sistema de posicionamiento se basa en una cuadrícula. Es diferente al sistema de posicionamiento de Flexbox, que se basa en la definición de un eje principal que orienta todas las propiedades. También es diferente al posicionamiento clásico de CSS, pues este se basa en las palabras clave top, bottom, right y left para definir las distancias entre los elementos y sus bordes. A pesar de las diferencias, la propiedad grid-auto-flow de CSS Grid es más fácil de entender cuando la comparamos a la propiedad flex-direction de Flexbox.
La propiedad flex-direction de Flexbox nos permite elegir el sentido en el que se ordenarán los elementos. Podemos elegir entre column, que los ordena de arriba abajo, column-reverse de abajo arriba, row que los ordena de izquierda a derecha y row-reverse que los ordena de derecha a izquierda. En el caso de CSS Grid, no hay una dirección basada en un un eje x o eje y, porque la cuadrícula cubre ambos ejes con sus columnas y filas. Por ello, la propiedad grid-auto-flow de CSS Grid habla más en términos de flujo, pues nos permite controlar cómo se reparten los elementos dentro de la cuadrícula, cómo fluyen.
De manera automática, la propiedad grid-auto-flow de CSS Grid está determinada como row. Esto quiere decir que los elementos se ubican en el orden en el que están escritos en nuestro código siguiendo la dirección de la fila. Entonces, los elementos empiezan por la primera celda en la esquina superior izquierda de la primera fila y llenan la fila hasta la derecha. Luego continúan en la siguiente fila. Si tuviéramos seis elementos, se organizarían del siguiente modo:
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
la propiedad grid-auto-flow de CSS Grid nos permite cambiar este flujo a column. Esto quiere decir que los elementos se ordenarán siguiendo la columna, empezando por la esquina superior izquierda, pasando por la columna hasta la esquina inferior izquierda. Luego, los elementos pasarían a la siguiente columna. En esta opción, si tuviéramos seis elementos, se organizarían de la siguiente manera:
| 1 | 4 |
| 2 | 5 |
| 3 | 6 |
Esta opción no solo cambia el flujo de los elementos, también cambia la lógica de la creación de la columna. Entonces, en vez de crear más filas según el número de elementos que haya para ubicar, CSS Grid creará más columnas. En este sentido, el número de filas se fijará de manera explícita por la propiedad grid-template-rows, mientras que las columnas se crearán de manera implícita.
Dense en la propiedad grid-auto-flow de CSS Grid
Además de las posibilidades row y column, en propiedad grid-auto-flow de CSS Grid podemos insertar la palabra clave dense. Como puedes ver en la demostración de la MDN sobre esta propiedad, puedes usar esta palabra clave individualmente o como complemento de las otras dos. Lo que hace esta opción es permitirle al navegador organizar los elementos en relación al espacio restante de la cuadrícula y no según el orden establecido. Entonces, si hay elementos pequeños que en teoría vienen después, el navegador tiene permiso para situarlos en los espacios sobrantes de la cuadrícula aunque no sea “su lugar”.
Ten en cuenta que, por la lógica de esta propiedad, puede que los elementos parezcan desordenados. Por ello, muchas veces se ignora esta palabra clave y se deja que el navegador mantenga un algoritmo “escaso”, en el que posiciona elementos siempre hacia adelante, sin revisar los espacios detrás.
¿Quieres seguir aprendiendo?
Ahora que sabes cómo funciona la propiedad grid-auto-flow de CSS Grid, ¡estás listo para empezar el diseño de tu página web! Sea cual sea el método de posicionamiento de elementos que utilices, te invitamos a que complementes los conocimientos teóricos que aprendes en nuestro blog con la práctica. ¿Y qué mejor lugar para obtener esta mezcla de conocimiento que en un bootcamp intensivo con grandes profesores? En KeepCoding creemos que esta es la mejor manera de obtener conocimientos rápidos y duraderos. Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, donde seguirás aprendiendo sobre lenguajes de programación mientras creas tu propio sitio web. ¡Anímate a inscribirte!
