Propiedad CSS grid-auto-flow

La propiedad grid-auto-flow controla cómo funciona el algoritmo de colocación automática de la cuadrícula, es decir, cómo se distribuyen en el grid los elementos que no has posicionado de forma explícita.

Cuando colocas elementos manualmente con grid-column-start, grid-row-start o grid-area, el navegador los sitúa exactamente donde indicas. El resto de elementos se colocan automáticamente, y grid-auto-flow decide el orden y la dirección que usa el navegador para rellenar las celdas restantes. Esta propiedad es ideal cuando tienes un contenedor de cuadrícula con un número variable o desconocido de elementos hijo y quieres que se distribuyan de forma predecible sin dimensionar cada uno.

Esta propiedad acepta las siguientes palabras clave: row, column, dense, row-dense y column-dense. Puedes usar una sola palabra clave (row, column o dense) o dos palabras clave, donde una establece la dirección y la otra es dense (row dense / column dense). Si no especificas una dirección, se asume row.

Cómo funciona

row (el valor predeterminado) rellena la cuadrícula fila a fila, de izquierda a derecha, añadiendo nuevas filas según sea necesario.
column rellena columna a columna, de arriba abajo, añadiendo nuevas columnas según sea necesario.
dense activa un algoritmo de empaquetado denso. Por defecto (empaquetado disperso), el algoritmo solo avanza hacia adelante, por lo que un elemento grande puede dejar un hueco que los elementos más pequeños posteriores omiten. Con dense, el navegador retrocede para rellenar esos huecos con cualquier elemento que quepa, lo que puede hacer que los elementos aparezcan fuera del orden del DOM. Úsalo solo cuando la densidad visual sea más importante que el orden de lectura o de tabulación, ya que puede perjudicar la accesibilidad.

Valor inicial	row
Se aplica a	Contenedores de cuadrícula.
Se hereda	No.
Animable	No.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	object.style.gridAutoFlow = "row";

Sintaxis

Sintaxis de la propiedad CSS grid-auto-flow

grid-auto-flow: row | column | dense | row-dense | column-dense | initial | inherit;

Ejemplo: grid-auto-flow: column

Con grid-auto-flow: column, los cuatro elementos rellenan la cuadrícula columna a columna. Compáralo con el ejemplo de row que sigue para ver la diferencia en el orden de colocación.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-flow property example</h2>
    <h3>grid-auto-flow: column</h3>
    <div class="grey-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Aquí los elementos se colocan rellenando cada columna. En el siguiente ejemplo podemos ver que los elementos se colocan rellenando cada fila.

Ejemplo: grid-auto-flow: row

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .white-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-auto-flow: row;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .white-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-flow property example</h2>
    <h3>grid-auto-flow: row</h3>
    <div class="white-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo: grid-auto-flow: row (con colocación explícita)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: row;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #00f3ff;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #ff00d4;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo: grid-auto-flow: column (con colocación explícita)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: column;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #00f3ff;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #827c7c;
      }
      .box3 {
        background-color: #ff00d4;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo: grid-auto-flow: column-dense

Los dos ejemplos siguientes muestran las variantes de empaquetado dense. Como box1 se coloca explícitamente en la fila 3 (grid-row-start: 3), deja un hueco al inicio de la cuadrícula. La palabra clave dense permite al navegador mover un elemento posterior a ese hueco en lugar de dejarlo vacío: más compacto, pero los elementos ya no siguen el orden del código fuente.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: column-dense;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #0ad6e0;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #841c72;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo: grid-auto-flow: row-dense

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: row-dense;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #0ad6e0;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #841c72;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
row	Coloca los elementos rellenando cada fila, añadiendo nuevas filas si es necesario. Este es el valor predeterminado de esta propiedad.	Pruébalo »
column	Coloca los elementos rellenando cada columna, añadiendo nuevas columnas si es necesario.	Pruébalo »
dense	Coloca los elementos para rellenar cualquier hueco en el grid, independientemente del tamaño del elemento. Esto puede hacer que los elementos colocados automáticamente aparezcan fuera del orden del DOM.	Pruébalo »
row-dense	Coloca los elementos rellenando cada fila y rellena los huecos en el grid.	Pruébalo »
column-dense	Coloca los elementos rellenando cada columna y rellena los huecos en el grid.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Cuándo usarlo

Utiliza grid-auto-flow cuando el número de elementos de la cuadrícula sea dinámico —una lista de tarjetas, un muro de fotos, una nube de etiquetas— y quieras que el navegador los coloque por ti. Cambia a column cuando el contenido deba leerse de arriba abajo antes de saltar a la siguiente columna, y añade dense solo cuando rellenar cada hueco sea más importante que mantener los elementos en el orden del código fuente.

El tamaño de las pistas creadas implícitamente se controla por separado con grid-auto-columns y grid-auto-rows. Para diseños explícitos, consulta grid-template y el capítulo principal de CSS Grid.

Práctica

¿Qué hace la propiedad CSS grid-auto-flow?

Define la distribución de filas y columnas en una cuadrículaEstablece el color de cada palabra en una cuadrícula de textoControla la colocación automática de los elementos de la cuadrículaEstablece el tamaño de las líneas de la cuadrículaCrea una cuadrícula tridimensional