Proprietà grid-auto-flow CSS

Definizione e uso

L'attributo grid-auto-flow controlla come gli elementi automatici vengono inseriti nella griglia.

Vedi anche:

Tutorial CSS:Layout a griglia CSS

Esempio

Esempio 1

Inserisci automaticamente gli elementi colonna per riga:

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

Prova da solo

Esempio 2

Riempi tutti i buchi nella griglia aggiungendo il valore "dense":

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

Prova da solo

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
row Valore predefinito. Posiziona gli elementi riempendo ogni riga.
column Posiziona gli elementi riempendo ogni colonna.
dense Posiziona gli elementi per riempire ogni buco nella griglia.
row dense Posiziona gli elementi riempendo ogni riga e ogni buco nella griglia.
column dense Posiziona gli elementi riempendo ogni colonna e ogni buco nella griglia.

Dettagli tecnici

Valore predefinito: row
Ereditarietà: No
Produzione di animazioni: Supportato. Vedi:Proprietà correlate agli animazioni.
Versione: Modulo di Layout a Griglia CSS Livello 1
Sintassi JavaScript: object.style.gridAutoFlow="row dense"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente questa proprietà.

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