CSS grid-auto-stroom eigenschap

Definitie en gebruik

De grid-auto-flow-eigenschap beheert hoe automatisch geplaatste items worden ingevoegd in het raster.

Zie ook:

CSS handleiding:CSS grid-layout

Voorbeeld

Voorbeeld 1

Voeg automatisch geplaatste items toe per kolom:

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

Probeer het zelf uit

Voorbeeld 2

Vul alle openingen in het raster door de waarde "dense" toe te voegen:

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

Probeer het zelf uit

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
row Standaardwaarde. Plaats items door elke rij te vullen.
column Plaats items door elke kolom te vullen.
dense Plaats items om elke opening in het raster te vullen.
row dense Plaats items door elke rij te vullen en elke opening in het raster te vullen.
column dense Plaats items door elk kolom te vullen en elke opening in het raster te vullen.

Technische details

Standaardwaarde: row
Inherits: Nee
Animatie maken: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS Grid Layout Module Level 1
JavaScript syntaxis: object.style.gridAutoFlow="row dense"

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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