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>

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>

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.

Browser-Support

chrome edge firefox safari opera
57.0+ 16.0+ 52.0+ 10.1+ 44.0+

Übe dein Wissen

Welche Werte können in der CSS-Eigenschaft 'grid-auto-flow' verwendet werden?
Finden Sie das nützlich?