CSS grid-auto-flow Eigenschaft

Definition und Verwendung

Die grid-auto-flow-Eigenschaft kontrolliert, wie automatisch eingefügte Elemente in das Gitter eingefügt werden.

Siehe auch:

CSS-Tutorial:CSS-Grid-Layout

Beispiel

Beispiel 1

Fügen Sie automatisch eingefügte Elemente zeilenweise hinzu:

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

Versuchen Sie es selbst

Beispiel 2

Füllen Sie alle Lücken im Gitter durch Hinzufügen des Werts "dense":

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

Versuchen Sie es selbst

CSS-Syntax

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

Attributwert

Wert Beschreibung
row Standardwert. Platzieren Sie die Elemente, um jede Lücke in der Zeile zu füllen.
column Platzieren Sie die Elemente, um jede Lücke in der Spalte zu füllen.
dense Platzieren Sie die Elemente, um jede Lücke im Gitter zu füllen.
row dense Platzieren Sie die Elemente, um jede Lücke in der Gitterstruktur zu füllen, und füllen Sie alle Lücken im Gitter.
column dense Platzieren Sie die Elemente, um jede Lücke in der Gitterstruktur zu füllen, und füllen Sie alle Lücken im Gitter.

Technische Details

Standardwert: row
Vererbung: Nein
Animationsproduktion: Unterstützt. Bitte lesen Sie:Animationsbezogene Attribute.
Version: CSS Grid Layout Modul Level 1
JavaScript-Syntax: object.style.gridAutoFlow="row dense"

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.

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