Propriedade de Posicionamento Automático do Grid
Última atualização: 2026-09-13
grid-auto-flow Propriedade de Posicionamento Automático do Grid
A propriedade grid-auto-flow controla como os itens do grid que não estão posicionados explicitamente são colocados automaticamente. Ela decide se os itens são preenchidos por linha ou por coluna e se o modo de compactação densa (dense) é ativado para preencher as lacunas no layout. A propriedade tem um impacto direto na ordenação geral do grid.
| Categoria | |
|---|---|
| Valor Inicial | row |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
grid-auto-flow: row | column | row dense | column dense;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
row | column | row dense | column dense | Palavra-chave | Direção de posicionamento automático e compactação densa |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-auto-flow | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： row preenche o grid linha por linha (o padrão); column preenche coluna por coluna.
Dica： A palavra-chave dense ativa a compactação densa: itens menores que vêm depois recuam para preencher as lacunas deixadas por itens maiores, mas a ordem visual pode mudar.
❓ Perguntas Frequentes
QQuando devo usar o modo dense?
AUse dense quando os itens têm tamanhos diferentes e o posicionamento automático deixa lacunas; ele faz com que os itens menores posteriores recuem para preencher os buracos anteriores, maximizando o uso do espaço. Mas o dense afasta a ordem visual da ordem do DOM, enquanto leitores de tela e a navegação por teclado ainda seguem o DOM, então a leitura pode saltar. Tenha cuidado em contextos sensíveis à acessibilidade.
QComo é o grid-auto-flow: column?
AOs itens primeiro preenchem a primeira coluna de cima para baixo e depois passam para a próxima coluna, fluindo em uma direção perpendicular ao preenchimento padrão que prioriza linhas. Com column, os itens extras criam colunas implícitas à direita em vez de linhas implícitas abaixo, que é a orientação desejada para listas organizadas horizontalmente. Convém para conteúdo orientado por colunas, como fluxos de leitura vertical, linhas do tempo e colunas de cartões relacionados. Você também pode escrever grid-auto-flow: column dense para ativar a compactação densa enquanto preenche coluna por coluna.
QComo construo um layout masonry com CSS Grid?
AUma abordagem comum é grid-auto-flow: row dense junto com cartões de alturas diferentes com grid-row: span 2 ou span 3, combinado com grid-auto-rows para alturas de linha uniformes; o dense então preenche os buracos. Mas o dense atrapalha a ordem visual/DOM e afeta a acessibilidade. Observe que a implementação nativa de grid masonry ainda é experimental e fica atrás de uma flag em alguns mecanismos, então para sites em produção o column-count continua sendo o fallback mais portátil quando preservar a ordem e a cobertura de navegadores importa.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Shorthand de Grid
Shorthand que define um grid em uma declaração
Trilhas de Coluna do Grid
Define a estrutura das colunas do grid
