Propriedade CSS grid-auto-flow
Exemplo
Inserir itens autocolocados coluna por coluna:
.grid-container {
display: grid;
grid-auto-flow:
column;
}
Definição e uso
A grid-auto-flow
propriedade controla como os itens colocados automaticamente são inseridos na grade.
Valor padrão: | fileira |
---|---|
Herdado: | não |
Animavel: | sim. Leia sobre animáveis |
Versão: | Módulo de Layout de Grade CSS Nível 1 |
Sintaxe JavaScript: | objeto .style.gridAutoFlow="linha densa" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
grid-auto-flow | 57 | 16 | 52 | 10 | 44 |
Sintaxe CSS
grid-auto-flow:
row|column|dense|row dense|column dense;
Valores de propriedade
Value | Description | Play it |
---|---|---|
row | Default value. Places items by filling each row | |
column | Places items by filling each column | |
dense | Place items to fill any holes in the grid | |
row dense | Places items by filling each row, and fill any holes in the grid | |
column dense | Places items by filling each column, and fill any holes in the grid |
Mais exemplos
Exemplo
Preencha quaisquer buracos na grade adicionando o valor "denso":
.grid-container {
display: grid;
grid-auto-flow: row
dense;
}
Páginas relacionadas
Tutorial CSS: Layout de grade CSS