Atributo grid-auto-flow do CSS

Definição e uso

A propriedade grid-auto-flow controla como os itens automaticamente inseridos são colocados na grade.

Veja também:

Tutorial CSS:Layout de grade CSS

Exemplo

Exemplo 1

Inserir automaticamente itens coluna por coluna:

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

Experimente você mesmo

Exemplo 2

Preencha todos os buracos na grade adicionando o valor "dense":

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

Experimente você mesmo

Sintaxe do CSS

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

Valor do atributo

Valor Descrição
row Valor padrão. Coloque os itens preenchendo cada linha.
column Coloque os itens preenchendo cada coluna.
dense Coloque os itens preenchendo qualquer buraco na grade.
row dense Coloque os itens preenchendo cada linha e preenchendo qualquer buraco na grade.
column dense Coloque os itens preenchendo cada coluna e preenchendo qualquer buraco na grade.

Detalhes técnicos

Valor padrão: row
Herança: Não
Produção de animação: Suporte. Veja:Propriedades relacionadas a animação.
Versão: Módulo de Layout de Grid CSS Level 1
Sintaxe do JavaScript: object.style.gridAutoFlow="row dense"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que completamente suporta essa propriedade.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44