grid-auto-flow
==============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
A propriedade de CSS **`grid-auto-flow`** controla como o algoritmo de arrumação automática funciona, especificando exatamente como os itens fluirão no grid.


```css
/\* Keywords Chaves \*/
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/\* Valores globais \*/
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;
```


|  |  |
| --- | --- |
| Initial value | `row` |
| Aplica-se a | grid containers |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Syntaxe
-------

Esta propriedade pode ser de duas maneiras:

* uma única keyword (palavra-chave): `row(linha)`, `column`(coluna), ou `dense(denso)`.
* duas keywords (palavras-chave): `row dense(linha densa)` ou `column dense(coluna densa)`.
### Valores

`row` (linha)

Keyword (palavra-chave) que determina que o algoritmo de arrumação automática coloca os itens preenchendo cada linha de uma vez, adicionando novas linhas se necessário. Se nem `row` (linha) ou `column` (coluna) for especificado, `row` (linha) é assumido.

`column` (coluna)

É uma keyword (palavra-chave) que determina que o algoritmo de arrumação automática coloque os itens preenchendo colunas, adicionando novas se necessário.

`dense` (denso)

Keyword (palavra-chave) que determina que o algoritmo de arrumação automática use um formato de compactação "denso", que tenta preencher os espaços anteriores do grid caso receba itens menores após. Isto talvez deixe os itens fora de ordem, preenchendo espaços deixados por itens maiores.

Se omitido, o algoritmo "esparso" é utilizado, onde o algoritmo de arrumação somente "avança" no grid ao colocar os itens, nunca voltando para preencher os espaços. Isso garante que todos os itens colocados automaticamente apareçam "em ordem", mesmo que deixem espaçs que poderiam ser preenchidos por itens posteriores.

### Sintaxe Formal
```

grid-auto-flow =   
  [ (en-US) row | (en-US) column ] (en-US)  || (en-US)  
  dense               
  
```

Exemplo
-------

### Conteúdo HTML


```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="direction" onchange="changeGridAutoFlow()">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox" onchange="changeGridAutoFlow()" />
<label for="dense">dense</label>
```

### Conteúdo CSS


```css
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column; /\* or 'row', 'row dense', 'column dense' \*/
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}
```


```
function changeGridAutoFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("direction");
  var dense = document.getElementById("dense");
  var gridAutoFlow = direction.value === "row" ? "row" : "column";

  if (dense.checked) {
    gridAutoFlow += " dense";
  }

  grid.style.gridAutoFlow = gridAutoFlow;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja Também
-----------

* Propriedades CSS relacionadas: `grid-auto-rows` (en-US), `grid-auto-columns` (en-US), `grid`
* Guia de Grid Layout: *Arrumação automática no grid layout (en-US)*
* Video tutorial: *Introduzindo arrumação automática no grid e ordem*

1. **CSS**
2. **CSS Reference**
3. CSS Grid Layout
4. **Guias**
    1. Conceitos básicos do grid layout
    2. Relacionamento com outros tipos de layout
    3. Arrumação baseada em linha (en-US)
    4. Grid template areas (en-US)
    5. Layout usando named grid lines (en-US)
    6. Arrumação automática no grid layout (en-US)
    7. Alinhamento de Box no grid layout (en-US)
    8. Grids, logical values e writing modes (en-US)
    9. CSS Grid Layout e Acessibilidade (en-US)
    10. CSS Grid Layout e Progressive Enhancement (en-US)
    11. Identificando layouts comuns usando grids (en-US)
5. **Propriedades**
    1. grid
    2. grid-area (en-US)
    3. grid-auto-columns (en-US)
    4. grid-auto-flow
    5. grid-auto-rows (en-US)
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap (en-US)
    9. grid-column-start (en-US)
    10. grid-gap (en-US)
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas (en-US)
    17. grid-template-columns
    18. grid-template-rows
6. **Glossário**
    1. Grid lines (en-US)
    2. Grid tracks (en-US)
    3. Grid cell (en-US)
    4. Grid areas
    5. Gutters (en-US)
    6. Grid row (en-US)
    7. Grid column (en-US)