CSS grid-auto-flow Eigenschaft

Die Eigenschaft grid-auto-flow steuert, wie der Auto-Placement-Algorithmus des Grids funktioniert — das heißt, wie Elemente, die Sie nicht explizit positioniert haben, in das Grid fließen.

Wenn Sie Elemente manuell mit grid-column-start, grid-row-start oder grid-area platzieren, setzt der Browser sie genau dort, wo Sie es angeben. Alle anderen Elemente werden automatisch platziert, und grid-auto-flow bestimmt die Reihenfolge und Richtung, die der Browser verwendet, um die verbleibenden Zellen zu füllen. Diese Eigenschaft ist daher genau das Richtige, wenn Sie einen Grid-Container mit einer variablen oder unbekannten Anzahl von Kindelementen haben und diese vorhersehbar anordnen möchten, ohne jedes einzeln zu dimensionieren.

Diese Eigenschaft akzeptiert folgende Schlüsselwörter: row, column, dense, row-dense und column-dense. Sie können ein einzelnes Schlüsselwort (row, column oder dense) oder zwei Schlüsselwörter verwenden, wobei eines die Richtung und das andere dense ist (row dense / column dense). Wenn Sie keine Richtung angeben, wird row angenommen.

So funktioniert es

row (der Standardwert) füllt das Grid zeilenweise von links nach rechts und fügt bei Bedarf neue Zeilen hinzu.
column füllt eine Spalte nach der anderen von oben nach unten und fügt bei Bedarf neue Spalten hinzu.
dense aktiviert einen dichten Packungsalgorithmus. Standardmäßig (lockere Packung) bewegt sich der Algorithmus nur vorwärts, sodass ein großes Element eine Lücke hinter sich lassen kann, die spätere kleinere Elemente überspringen. Mit dense geht der Browser zurück und füllt diese Lücken mit jedem passenden Element — was dazu führen kann, dass Elemente außerhalb der DOM-Reihenfolge erscheinen. Verwenden Sie es nur, wenn visuelle Dichte wichtiger ist als Lese-/Tab-Reihenfolge, da es die Barrierefreiheit beeinträchtigen kann.

Anfangswert	row
Gilt für	Grid-Container.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS Grid Layout Module Level 1
DOM-Syntax	object.style.gridAutoFlow = "row";

Syntax

Syntax der CSS-Eigenschaft grid-auto-flow

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

Beispiel: grid-auto-flow: column

Mit grid-auto-flow: column füllen die vier Elemente das Grid spaltenweise. Vergleichen Sie es mit dem folgenden row-Beispiel, um den Unterschied in der Platzierungsreihenfolge zu sehen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-flow property example</h2>
    <h3>grid-auto-flow: column</h3>
    <div class="grey-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Probier es selbst »

Hier werden die Elemente platziert, indem jede Spalte gefüllt wird. Im folgenden Beispiel sehen wir, dass die Elemente platziert werden, indem jede Zeile gefüllt wird.

Beispiel: grid-auto-flow: row

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .white-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-auto-flow: row;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .white-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-flow property example</h2>
    <h3>grid-auto-flow: row</h3>
    <div class="white-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Probier es selbst »

Beispiel: grid-auto-flow: row (mit expliziter Platzierung)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: row;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #00f3ff;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #ff00d4;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel: grid-auto-flow: column (mit expliziter Platzierung)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: column;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #00f3ff;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #827c7c;
      }
      .box3 {
        background-color: #ff00d4;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Probier es selbst »

Beispiel: grid-auto-flow: column-dense

Die nächsten zwei Beispiele zeigen die dense-Packvarianten. Da box1 explizit auf Zeile 3 platziert wird (grid-row-start: 3), entsteht am Anfang des Grids eine Lücke. Das Schlüsselwort dense erlaubt dem Browser, ein späteres Element in diese Lücke zurückzuziehen, anstatt sie leer zu lassen — kompakt, aber die Elemente folgen nicht mehr der Quellreihenfolge.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: column-dense;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #0ad6e0;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #841c72;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Probier es selbst »

Beispiel: grid-auto-flow: row-dense

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: row-dense;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #0ad6e0;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #841c72;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Probier es selbst »

Werte

Wert	Beschreibung	Ausprobieren
row	Platziert Elemente, indem jede Zeile gefüllt wird, und fügt bei Bedarf neue Zeilen hinzu. Dies ist der Standardwert dieser Eigenschaft.	Ausprobieren »
column	Platziert Elemente, indem jede Spalte gefüllt wird, und fügt bei Bedarf neue Spalten hinzu.	Ausprobieren »
dense	Platziert Elemente, um Lücken im Grid zu füllen, unabhängig von der Elementgröße. Dies kann dazu führen, dass automatisch platzierte Elemente außerhalb der DOM-Reihenfolge erscheinen.	Ausprobieren »
row-dense	Platziert Elemente, indem jede Zeile gefüllt wird, und füllt Lücken im Grid.	Ausprobieren »
column-dense	Platziert Elemente, indem jede Spalte gefüllt wird, und füllt Lücken im Grid.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Wann verwenden

Greifen Sie auf grid-auto-flow zurück, wenn die Anzahl der Grid-Elemente dynamisch ist — eine Kartenliste, eine Fotowand, eine Tag-Cloud — und der Browser die Platzierung übernehmen soll. Wechseln Sie zu column, wenn Inhalte von oben nach unten gelesen werden sollen, bevor sie umbrechen, und fügen Sie dense nur dann hinzu, wenn das Füllen jeder Lücke wichtiger ist als die Beibehaltung der Quellreihenfolge der Elemente.

Die Größe der implizit erstellten Tracks wird separat durch grid-auto-columns und grid-auto-rows gesteuert. Für explizite Layouts siehe grid-template und das Hauptkapitel zu CSS Grid.

Übungen

Übung

Was macht die CSS-Eigenschaft grid-auto-flow?

Sie definiert die Verteilung von Zeilen und Spalten in einem GridSie legt die Farbe für jedes Wort in einem Text-Grid festSie steuert die automatische Platzierung von Grid-ElementenSie legt die Größe der Grid-Linien festSie erstellt ein dreidimensionales Grid