CSS grid-auto-flow eigenschap
Voorbeeld
Automatisch geplaatste items kolom voor kolom invoegen:
.grid-container {
display: grid;
grid-auto-flow:
column;
}
Definitie en gebruik
De grid-auto-flow
eigenschap bepaalt hoe automatisch geplaatste items in het raster worden ingevoegd.
Standaardwaarde: | rij |
---|---|
geërfd: | Nee |
Animeerbaar: | Ja. Lees over animeren |
Versie: | CSS-rasterlay-outmodule niveau 1 |
JavaScript-syntaxis: | object .style.gridAutoFlow="rij dicht" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
grid-auto-flow | 57 | 16 | 52 | 10 | 44 |
CSS-syntaxis
grid-auto-flow:
row|column|dense|row dense|column dense;
Eigendomswaarden
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 |
Meer voorbeelden
Voorbeeld
Vul eventuele gaten in het raster door de "dichte" waarde toe te voegen:
.grid-container {
display: grid;
grid-auto-flow: row
dense;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-rasterlay-out