CSS grid-auto-flow egenskap

Definition och användning

grid-auto-flow-egenskapen styr hur automatiskt placerade objekt infogas i nätverket.

Se också:

CSS-tutorial:CSS-grid-layout

Exempel

Exempel 1

Infoga automatiskt placerade objekt kollektivt:

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

Prova själv

Exempel 2

Fyll alla hål i nätverket genom att lägga till värdet "dense":

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
row Standardvärde. Placera objekt genom att fylla varje rad.
column Placera objekt genom att fylla varje kolumn.
dense Placera objekt för att fylla alla hål i nätverket.
row dense Placera objekt genom att fylla varje rad och fylla alla hål i nätverket.
column dense Placera objekt genom att fylla varje kolumn och fylla alla hål i nätverket.

Tekniska detaljer

Standardvärde: row
Arv: Nej
Animering: Stöds. Se vidare:Animationsrelaterade egenskaper.
Version: CSS Grid Layout Module Level 1
JavaScript-syntax: object.style.gridAutoFlow="row dense"

Webbläsarstöd

Bordnumren anger den första webbläsarversion som helt stöder detta egenskap.

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