CSS-Eigenschaft grid-auto-flow

Die Eigenschaft grid-auto-flow steuert, wie automatisch platzierte Elemente in das Gitter eingeflossen werden.

Diese Eigenschaft hat folgende Werte: row, column, dense, row-dense, column-dense. Wenn weder der Wert "row" noch "column" angegeben wird, wird "row" angenommen.

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

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .grey-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
      grid-auto-flow: column;
      grid-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>Ein Beispiel für die Eigenschaft grid-auto-flow</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>

Versuch es selber!

Hier ist ein Beispiel mit dem Wert "row":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .white-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
      grid-auto-flow: row;
      grid-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>Ein Beispiel für die Eigenschaft grid-auto-flow</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>

Versuch es selber!

Werte

Wert	Beschreibung
row	Platziert die Elemente durch Ausfüllen jeder Zeile und bei Bedarf Einfügen neuer Zeilen. Das ist der Standardwert dieser Eigenschaft.
column	Platziert die Elemente durch Ausfüllen jeder Spalte und bei Bedarf Einfügen neuer Spalten.
dense	Platziert die Elemente, um Lücken im Gitter zu füllen, wenn später kleinere Elemente auftauchen.
row-dense	Platziert Elemente, indem jede Zeile ausgefüllt wird, und füllt Lücken im Gitter.
column-dense	Platziert Elemente, indem jede Spalte ausgefüllt wird, und füllt Lücken im Gitter.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.