Propriedade CSS grid-auto-flow

A propriedade grid-auto-flow controla como o algoritmo de posicionamento automático do grid funciona — ou seja, como os itens que você não posicionou explicitamente são distribuídos no grid.

Quando você posiciona itens manualmente com grid-column-start, grid-row-start ou grid-area, o navegador os coloca exatamente onde você indica. Todos os outros itens são posicionados automaticamente, e grid-auto-flow decide a ordem e a direção que o navegador usa para preencher as células restantes. Essa propriedade é ideal quando você tem um contêiner grid com um número variável ou desconhecido de filhos e quer que eles sejam organizados de forma previsível sem dimensionar cada um individualmente.

Essa propriedade aceita as seguintes palavras-chave: row, column, dense, row-dense e column-dense. Você pode usar uma única palavra-chave (row, column ou dense) ou duas palavras-chave, onde uma define a direção e a outra é dense (row dense / column dense). Se você não especificar uma direção, row é assumido.

Como funciona

row (o padrão) preenche o grid uma linha por vez, da esquerda para a direita, adicionando novas linhas conforme necessário.
column preenche uma coluna por vez, de cima para baixo, adicionando novas colunas conforme necessário.
dense ativa um algoritmo de empacotamento denso. Por padrão (empacotamento esparso), o algoritmo avança apenas para frente, então um item grande pode deixar uma lacuna que itens menores posteriores pulam. Com dense, o navegador retorna para preencher essas lacunas com qualquer item que caiba — o que pode fazer com que os itens apareçam fora da ordem do DOM. Use-o somente quando a densidade visual for mais importante do que a ordem de leitura/tabulação, pois pode prejudicar a acessibilidade.

Valor Inicial	row
Aplica-se a	Contêineres grid.
Herdado	Não.
Animável	Não.
Versão	CSS Grid Layout Module Level 1
Sintaxe DOM	object.style.gridAutoFlow = "row";

Sintaxe

Sintaxe da propriedade CSS grid-auto-flow

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

Exemplo: grid-auto-flow: column

Com grid-auto-flow: column, os quatro itens preenchem o grid uma coluna por vez. Compare com o exemplo row a seguir para ver a diferença na ordem de posicionamento.

<!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>

Experimente Você Mesmo »

Aqui, os itens são posicionados preenchendo cada coluna. No exemplo a seguir, vemos que os itens são posicionados preenchendo cada linha.

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

Experimente Você Mesmo »

Exemplo: grid-auto-flow: row (com posicionamento explícito)

<!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>

Experimente Você Mesmo »

Resultado

Exemplo: grid-auto-flow: column (com posicionamento explícito)

<!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>

Experimente Você Mesmo »

Exemplo: grid-auto-flow: column-dense

Os dois próximos exemplos mostram as variantes de empacotamento dense. Como box1 é posicionado explicitamente na linha 3 (grid-row-start: 3), ele deixa uma lacuna no início do grid. A palavra-chave dense permite que o navegador mova um item posterior para preencher essa lacuna em vez de deixá-la vazia — compacto, mas os itens não seguem mais a ordem da fonte.

<!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>

Experimente Você Mesmo »

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

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
row	Posiciona os itens preenchendo cada linha, adicionando novas linhas se necessário. Este é o valor padrão desta propriedade.	Experimente »
column	Posiciona os itens preenchendo cada coluna, adicionando novas colunas se necessário.	Experimente »
dense	Posiciona os itens para preencher quaisquer lacunas no grid, independentemente do tamanho do item. Isso pode fazer com que itens posicionados automaticamente apareçam fora da ordem do DOM.	Experimente »
row-dense	Posiciona os itens preenchendo cada linha e preenche as lacunas no grid.	Experimente »
column-dense	Posiciona os itens preenchendo cada coluna e preenche as lacunas no grid.	Experimente »
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade de seu elemento pai.

Quando usar

Use grid-auto-flow quando o número de itens do grid for dinâmico — uma lista de cards, um mural de fotos, uma nuvem de tags — e você quiser que o navegador os posicione automaticamente. Mude para column quando o conteúdo precisar ser lido de cima para baixo antes de quebrar para a próxima coluna, e adicione dense somente quando preencher todas as lacunas for mais importante do que manter os itens na ordem da fonte.

O tamanho das trilhas criadas implicitamente é controlado separadamente por grid-auto-columns e grid-auto-rows. Para layouts explícitos, consulte grid-template e o capítulo principal do CSS Grid.

Prática

O que a propriedade CSS grid-auto-flow faz?

Define a distribuição de linhas e colunas em um gridDefine a cor de cada palavra em um grid de textoControla o posicionamento automático dos itens do gridDefine o tamanho das linhas do gridCria um grid tridimensional