CSS/Eigenschaften/grid-auto-flow

Browserunterstützung
caniuse.com

Die Eigenschaft grid-auto-flow legt fest, wie sich autoplaced Inhalte des Rasters im Grid verteilen.

Erlaubte Werte

• row
• column
• dense: optionaler Zusatzwert, der einen auto-placement algorithm zum dichteren Packen der Grid Items verwendet

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

• row

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

.gallery {
  grid-auto-flow: row dense; 
}

Bei Bildergalerien kann es Elemente geben, die mehrere Rasterzellen einnehmen (Panoramen oder landcsape-Formate vs Porträt-Formate). Dadurch kann es zu nicht belegten Rasterzellen am Ende eines tracks kommen.
Durch das Schlüsselwort dense wird der Algorithmus so geändert, dass die vorher leeren Bereiche durch im Markup hinten stehende Elemente aufgefüllt werden.

Siehe auch

• CSS/Tutorials/Grid
  • responsive Raster ohne Media Queries
    grid-auto-flow

Weblinks

• Spezifikation (CSSWG): grid-auto-flow
• Details: caniuse.com