grid-auto-flow

Die CSS-Eigenschaft grid-auto-flow ist Teil der CSS Grid Layout-Spezifikation, die es uns ermöglicht, den Fluss von Grid-Items zu steuern, die automatisch platziert werden, wenn sie nicht explizit mit beliebigen Grid-Platzierungseigenschaften positioniert sind.

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-auto-flow: dense;
}

Dieses Beispiel erstellt einen Grid-Container, der acht Elemente pro Zeile aufnehmen kann und verbleibenden freien Platz mit kleineren, später erscheinenden Elementen füllt, die hineinpassen.

Syntax

grid-auto-flow: [ row | column ] || dense

• Anfangswert: row
• Gilt für: Grid-Container
• Vererbt: nein
• Berechneter Wert: wie angegeben
• Animationstyp: diskret

Werte

/* Keyword values */
grid-auto-flow: column;
grid-auto-flow: row;
grid-auto-flow: dense;
grid-auto-flow: column dense;
grid-auto-flow: row dense; /* same as `dense` */


/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial; /* same as `row` */
grid-auto-flow: revert;
grid-auto-flow: revert-layer;
grid-auto-flow: unset;

row

Dies ist der Standardwert. Sobald festgelegt, werden Elemente horizontal angeordnet. Der automatische Platzierungsalgorithmus von Grid platziert Grid-Items, indem er jede Zeile füllt, und erstellt nur neue Zeilen, wenn dies erforderlich ist.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-auto-rows: 50px;
}

Dieses Beispiel zeigt, dass die Grid-Items nebeneinander in einer Zeile platziert werden und sobald kein Platz mehr in der aktuellen Zeile ist, fügt Grid automatisch neue Zeilen hinzu, um den Rest der Grid-Items zu platzieren.

column

Grid-Items werden vertikal spaltenweise angeordnet. Der automatische Platzierungsalgorithmus platziert Grid-Items, indem er jede Spalte füllt und bei Bedarf zusätzliche Spalten erstellt.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-template-rows: 50px 50px 50px;
  grid-auto-flow: column;
}

Wie Sie im folgenden Bild sehen können, platziert Grid in diesem Beispiel die Elemente in Spalten und sobald keine Zelle mehr frei ist, rückt es automatisch zur nächsten Spalte vor, bis keine Grid-Items mehr vorhanden sind.

Im obigen Beispiel gab es drei Zeilen, die explizit durch grid-template-rows definiert wurden. Nun sehen wir ein weiteres Beispiel ohne spezifizierte Zeilen und mit grid-auto-flow auf column gesetzt.

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 50px);
  grid-auto-flow: column;
}

Hier haben wir nur fünf Spalten definiert, aber da wir die automatische Platzierung auf column gesetzt haben, generiert es zusätzliche Spalten, um den Rest der Grid-Items zu platzieren, was zu einem Überlauf führen kann.

Beachten Sie, dass diese zusätzlichen Spalten implizite Spalten genannt werden und wir ihre Größe mit der grid-auto-columns-Eigenschaft steuern können.

dense

Wenn angegeben, versucht der automatische Platzierungsalgorithmus, den freien Platz im Grid mit kleineren Elementen zu füllen, auch wenn diese in der Reihenfolge des Markup nicht korrekt sind.

Um den Schlüsselwortwert dense besser zu verstehen, nehmen wir als Beispiel ein 8x8-Grid aus 50px Quadraten.

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
}

Dann vergrößern wir einige davon.

.grid-item:is(:nth-child(3), :nth-child(5), :nth-child(8), :nth-child(12), :nth-child(17) {
  grid-column: span 3;
  grid-row: span 2;
}

Das Ergebnis sehen Sie im folgenden Bild.

Wie Sie sehen können, legt Grid standardmäßig die Elemente in der gleichen Reihenfolge wie im HTML-Code ab. Und wenn es auf einen Platz stößt, auf den es kein Element passt, überspringt es diesen Platz und hinterlässt "Lücken" in unserem Layout.

Das Schlüsselwort dense ändert dieses Verhalten, indem es dem Grid erlaubt, das HTML zu ignorieren, sodass, wenn es ein Element findet, das in eine Lücke passt, es das Element nimmt – unabhängig davon, ob es im HTML als nächstes kommt oder nicht – und es in diese Lücke platziert.

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  grid-auto-flow: dense;
}

Schauen Sie sich das sechste Grid-Element an, es wurde jetzt verschoben, um die erste Lücke zu füllen, in die es passt.

Standardmäßig schreitet Grid vorwärts und schaut nie zurück, um zu prüfen, ob es ein Element in vorherigen leeren Räumen unterbringen kann. Aber wenn wir dense deklarieren, versucht der Algorithmus, so viele Lücken wie möglich zu füllen, unabhängig von der Quellreihenfolge.

row dense

Da row der Standardwert ist, ist die Verwendung von row dense dasselbe wie die Verwendung von dense und hat dieselbe Wirkung.

column dense

Grid-Items werden spaltenweise angeordnet und füllen Lücken auf.

Wenn wir im vorherigen Beispiel den Wert der grid-auto-flow-Eigenschaft auf column dense ändern, erhalten wir folgendes Ergebnis.

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  grid-auto-flow: column dense;
}

Barrierefreiheit

Eine Sache, die bei der Verwendung der grid-auto-flow-Eigenschaft zu beachten ist, ist das Problem, das der dense-Algorithmus verursacht.

Das Schlüsselwort dense ändert nur die visuelle Reihenfolge der Grid-Items, und diese Reihenfolge stimmt möglicherweise nicht mit der ursprünglichen Dokumentreihenfolge überein, was zu einer sehr schlechten Erfahrung für jemanden führen kann, der mit der Tastatur durch das Dokument tappt oder einen Screenreader hört, der Inhalte in der gleichen Reihenfolge wie das HTML vorliest.

Vermeiden Sie daher die Verwendung von Schlüsselwortwerten wie dense, wenn die HTML-Reihenfolge der Elemente wichtig ist. Zum Beispiel kann dies für eine zufällige Bildergalerie gut sein, aber vielleicht nicht so sehr für Ihre Formular-Eingabefelder.

Zum Zeitpunkt der Verfassung dieses Textes gibt es einen Vorschlag, dieses Problem anzugehen, der dieses Problem hoffentlich in Zukunft lösen wird.

Demo

Das Erstellen einer Galerie mit CSS Grid ist sehr angenehm geworden, und Sie können grid-auto-flow hinzufügen, um sie noch besser zu machen.

.gallery {
  display: grid;
  grid-template-columns: repeat(8, 8vw);
  grid-template-rows: repeat(8, 8vw);
  grid-auto-flow: dense;
  gap: 1rem;
}

.item:is(:nth-child(2), :nth-child(4), :nth-child(6)) {
  grid-column: span 2;
  grid-row: span 2;
}

Sie können den Wert der grid-auto-flow-Eigenschaft ändern, um seine Wirkung auf die Galerie zu sehen.

Browser-Unterstützung

Spezifikation

CSS Grid Layout Module Level 2

Weitere Informationen

Verwandt