CSS grid-automatiske-rækker egenskab

Definition og brug

grid-auto-flow egenskaben kontrollerer hvordan automatisk placerede projekter indsættes i gitteret.

Se også:

CSS tutorial:CSS gitterlayout

Eksempel

Eksempel 1

Indsæt automatisk placerede projekter kolonnevis:

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

Prøv det selv

Eksempel 2

Fyld alle huller i gitteret ved at tilføje værdien "dense":

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

Prøv det selv

CSS-syntaks

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

Egenskabsværdi

Værdi Beskrivelse
row Standardværdi. Placer projekter ved at fylde hvert række.
column Placer projekter ved at fylde hvert kolonne.
dense Placer projekter for at fylde alle huller i gitteret.
row dense Placer projekter ved at fylde hvert række, og fylde alle huller i gitteret.
column dense Placer projekter ved at fylde hvert kolonne, og fylde alle huller i gitteret.

Tekniske detaljer

Standardværdi: row
Arv: Nej
Animation fremstilling: Understøttet. Se:Animation relaterede egenskaber.
Version: CSS Grid Layout Module Level 1
JavaScript-syntaks: object.style.gridAutoFlow="row dense"

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben.

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