En ocasiones, cuando pienso en cómo posicionar los elementos de un contenedor grid con la propiedad grid-auto-flow, me siento como si estuviera construyendo una figura con bloques de Lego. Sé que puede sonar extraño en un primer momento, pero en ambos escenarios puedes elegir cómo quieres colocar los elementos dependiendo de lo que quieras lograr, ya sea por filas o de una forma más libre. Si no sabes muy bien de lo que estoy hablando y te interesa crear cuadrículas más flexibles y ordenadas, acompáñame a explorar qué es grid-auto-flow, para qué sirve y cómo puedes usarlo para mejorar el diseño de tu página web sin mucho esfuerzo.

¿Qué encontrarás en este post?

¿Qué es grid-auto-flow en CSS?

Grid-auto-flow es la propiedad en CSS que determina el flujo de los elementos dentro de un contenedor grid cuando no especificas manualmente su posición. Dicho de una forma más sencilla, es la que controla cómo se llenan las filas o columnas automáticas del grid, lo que es muy útil cuando estás trabajando con un número dinámico de elementos que pueden no encajar perfectamente en la estructura de la cuadrícula que has definido.

Retomando la metáfora de los bloques de Lego, tú puedes decidir si los colocas formando filas ordenadas o construyendo columnas hacia arriba. Al usar grid-auto-flow, es como si le dijeras a tus bloques de Lego que se coloquen automáticamente en filas bien alineadas o que se apilen en columnas.

¿Para qué sirve grid-auto-flow?

Cuando empiezas a trabajar con grids, es fácil preguntarse: “¿Cuándo debería usar grid-auto-flow?“. La verdad es que esta propiedad es muy útil al momento de resolver ciertos desafíos en el diseño web. Por ejemplo, estas son algunas situaciones comunes donde puede solucionarte la vida:

Si estás creando una interfaz dinámica donde los elementos cambian frecuentemente, esta propiedad los organiza automáticamente para que encajen de forma ordenada.
Esta propiedad se encarga de llenar las filas o columnas de forma lógica, para que no tengas que controlar manualmente dónde va cada elemento y puedas enfocarte en el diseño general.
Si quieres que tu diseño se adapte al tamaño de la pantalla sin tener que escribir reglas adicionales, esta propiedad ajusta automáticamente el flujo mientras se asegura que los elementos se coloquen correctamente, incluso en los dispositivos pequeños.

Básicamente, grid-auto-flow simplifica la distribución de contenido en las cuadrículas automáticas, lo que asegura que los elementos se posicionen de forma lógica y eficiente.

Sintaxis de grid-auto-flow

Veamos ahora cómo se estructura la sintaxis de esta propiedad:

.container {
  display: grid;
  grid-auto-flow: valor;
}

Valores comunes de grid-auto-flow

En cuanto a los valores, hay cuatro posibilidades que determinan cómo se deben distribuir automáticamente los elementos dentro de una cuadrícula:

row: Es el valor predeterminado. Con este, los elementos se colocan fila por fila, llenando las filas antes de pasar a la siguiente.

grid-auto-flow: row;

column: Los elementos se colocan columna por columna, de manera que llenan una columna antes de pasar a la siguiente.

grid-auto-flow: column;

dense: Se utiliza junto con row o column para rellenar huecos disponibles en el grid, lo que asegura que el espacio se usará eficientemente.

grid-auto-flow: row dense;

Combinaciones: También, puedes mezclar valores como column dense para especificar tanto el flujo como la densidad.

Ejemplos con grid-auto-flow

Cuando se trata de entender cómo funciona una propiedad, no hay nada mejor que ver ejemplos prácticos en acción. Por eso, vamos a suponer algunas situaciones típicas de diseño web con las que podrás ver cómo esta propiedad puede simplificar tu vida como desarrollador.

Flujo por filas

Supongamos que tienes una galería de productos y quieres que estos se organicen en filas horizontales, de manera que llenen cada fila antes de pasar a la siguiente. Puedes hacer lo siguiente:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 100px);
    grid-auto-flow: row;
    gap: 10px;
  }

  .item {
    background-color: #add8e6;
    padding: 20px;
    text-align: center;
  }
</style>

En este caso, los elementos van a colocarse de izquierda a derecha, respetando la estructura de las filas.

Flujo por columnas

Pasando con un ejemplo diferente, vamos a suponer que necesitas crear un diseño de barra lateral donde los elementos se apilen de arriba hacia abajo en columnas antes de llenar la siguiente columna. Esto es lo que puedes hacer:

<div class="grid-container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-rows: repeat(2, 100px);
    grid-auto-flow: column;
    gap: 10px;
  }

  .item {
    background-color: #ffcccb;
    padding: 20px;
    text-align: center;
  }
</style>

Esto es perfecto en situaciones en las que quieras crear listas de tareas o menús desplegables, por dar apenas un par de ejemplos.

Rellenar huecos con dense

Para este ejemplo, imagina que tienes un diseño más complejo donde algunos elementos ocupan más espacio que otros. Al usar dense, el grid busca rellenar los huecos disponibles, mientras se asegura de que todo quede compacto y bien organizado:

<div class="grid-container">
  <div class="item" style="grid-row: span 2;">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-auto-flow: row dense;
    gap: 10px;
  }

  .item {
    background-color: #90ee90;
    padding: 20px;
    text-align: center;
  }
</style>

Consejos para usar grid-auto-flow

Ahora que ya sabes cómo funciona esta propiedad y lo que puedes hacer con ella, voy a darte algunas recomendaciones que te serán de gran ayuda. Son bastante simples, pero créeme que pueden hacer una gran diferencia:

Combínala con otras propiedades de grid: Puedes usar grid-template-rows o grid-template-columns para establecer un esquema básico, mientras grid-auto-flow maneja el resto.
Evita huecos innecesarios: Para que tu diseño sea compacto, utiliza el valor dense.
Prueba diferentes flujos: Experimenta con row y column para encontrar el más adecuado según tus necesidades.

Ya has aprendido que con grid-auto-flow puedes controlar cómo se posicionan los elementos en un contenedor grid y hacer que tus diseños sean más eficientes y adaptables. Únicamente es cuestión de práctica, constancia y entusiasmo para que puedas obtener el máximo provecho de esta propiedad y mejorar tus layouts.

Además, puedo decirte que dominar este tipo de herramientas no solo mejora tus habilidades técnicas, sino que también te prepara para resolver problemas reales en desarrollo web. Por eso, si quieres aprender más acerca de cómo crear diseños modernos y responsivos, no dudes en unirte a nuestro Bootcamp en Desarrollo Web. Te formaremos como un experto en CSS, HTML, JavaScript, React y otras tecnologías altamente demandadas, para que puedas empezar una nueva carrera como desarrollador.

¡La carrera de tus sueños está a tu alcance!