Grid Auto Flow

Wenn mehr Items im Grid sind als Plätze im expliziten Raster, erstellt der Browser automatisch neue Zeilen oder Spalten. Das nennt man das implizite Grid. Mit grid-auto-flow steuerst du, ob neue Items in Zeilen oder Spalten eingefügt werden und ob Lücken gefüllt werden sollen. Mit grid-auto-rows und grid-auto-columns legst du fest, wie groß diese automatisch erzeugten Tracks sind.

Steckbrief Grid Auto Flow

Syntax: grid-auto-flow: row | column | dense
Initialwert: row
Vererbt: Nein
Animierbar: Nein

Kategorie: Grid
Werte: 13
Beispiele: 4
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Grundlagen

CSS Grid unterscheidet zwischen dem expliziten und dem impliziten Grid. Das explizite Grid ist das, was du mit grid-template-columns und grid-template-rows definierst. Wenn der Browser zusätzliche Tracks braucht (weil es mehr Items gibt oder ein Item an einer Position platziert wird, die außerhalb des expliziten Grids liegt), erstellt er implizite Tracks.

Standardmäßig haben implizite Tracks die Größe auto, sie passen sich also an ihren Inhalt an. Mit grid-auto-rows und grid-auto-columns kannst du eine feste Größe oder minmax() für diese automatisch erzeugten Tracks festlegen.

grid-auto-flow bestimmt die Richtung, in der neue Items platziert werden. row (Standard) füllt zeilenweise auf. column füllt spaltenweise. Der dense-Algorithmus versucht, Lücken im Grid aufzufüllen, indem er kleinere Items nach vorne verschiebt.

Syntax & Werte

13 Werte

grid-auto-flow

Wert	Beschreibung	Beispiel
`row`	Items werden zeilenweise platziert. Neue Zeilen werden bei Bedarf erstellt (Standard).	grid-auto-flow: row
`column`	Items werden spaltenweise platziert. Neue Spalten werden bei Bedarf erstellt.	grid-auto-flow: column
`dense`	Der Browser füllt Lücken im Grid, indem er kleinere Items nach vorne verschiebt.	grid-auto-flow: dense
`row dense`	Zeilenweise Platzierung mit Lücken-Füllung.	grid-auto-flow: row dense
`column dense`	Spaltenweise Platzierung mit Lücken-Füllung.	grid-auto-flow: column dense

grid-auto-rows

Wert	Beschreibung	Beispiel
`auto`	Implizite Zeilen passen sich an den Inhalt an (Standard).	grid-auto-rows: auto
`<length>`	Feste Höhe für implizite Zeilen.	grid-auto-rows: 80px
`minmax()`	Mindest- und Maximalhöhe für implizite Zeilen.	grid-auto-rows: minmax(80px, auto)
`<fr>`	Anteilige Höhe, nützlich bei bekannter Container-Höhe.	grid-auto-rows: 1fr

grid-auto-columns

Wert	Beschreibung	Beispiel
`auto`	Implizite Spalten passen sich an den Inhalt an (Standard).	grid-auto-columns: auto
`<length>`	Feste Breite für implizite Spalten.	grid-auto-columns: 120px
`minmax()`	Mindest- und Maximalbreite für implizite Spalten.	grid-auto-columns: minmax(100px, 1fr)
`<fr>`	Anteilige Breite.	grid-auto-columns: 1fr

Beispiele

4 Beispiele

Hier definieren wir nur 2 Spalten, aber es gibt 8 Items. Die überschüssigen Items landen in impliziten Zeilen, die durch grid-auto-rows: 80px eine feste Höhe bekommen.

grid-auto-rows: 80px

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  gap: 8px;
}

/* Nur 2 Spalten definiert, keine Zeilen.
   Alle Zeilen sind implizit und 80px hoch. */

<div class="demo">
<div class="grid-auto-rows">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
</div>

Standardmäßig füllt Grid zeilenweise auf. Mit column wird spaltenweise gefüllt: das nächste Item kommt in die nächste Zeile derselben Spalte.

grid-auto-flow: column

.container {
  display: grid;
  grid-template-rows: repeat(3, 60px);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}

/* Items werden spaltenweise platziert:
   1, 2, 3 in Spalte 1 → 4, 5, 6 in Spalte 2 */

<div class="demo">
<div class="grid-column-flow">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
</div>

Ohne dense kann es Lücken im Grid geben, wenn ein breiteres Item nicht in die verbleibende Zeile passt. dense füllt diese Lücken, indem es kleinere Items nach vorne verschiebt.

dense-Algorithmus

/* Ohne dense: Item 2 passt nicht neben Item 1 → Lücke in Spalte 3 */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }

/* Mit dense: Item 3 füllt die Lücke in Spalte 3 */
.grid-dense { grid-auto-flow: dense; }

.wide { grid-column: span 2; }

<div class="demo">
<div class="example">
  <div class="example-label">Ohne dense (Lücken)</div>
  <div class="grid-sparse">
    <div class="item wide">1 (span 2)</div>
    <div class="item wide">2 (span 2)</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item wide">5 (span 2)</div>
    <div class="item">6</div>
  </div>
</div>
<div class="example">
  <div class="example-label">Mit dense (Lücken gefüllt)</div>
  <div class="grid-dense">
    <div class="item wide">1 (span 2)</div>
    <div class="item wide">2 (span 2)</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item wide">5 (span 2)</div>
    <div class="item">6</div>
  </div>
</div>
</div>

minmax() definiert eine Mindest- und Maximalgröße. minmax(80px, auto) bedeutet: mindestens 80px, aber darf wachsen, wenn der Inhalt mehr Platz braucht.

minmax() für implizite Zeilen

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(80px, auto);
  gap: 8px;
}

/* Mindestens 80px hoch, wächst bei Bedarf */

<div class="demo">
<div class="grid-minmax">
  <div class="item">Kurz</div>
  <div class="item">Kurz</div>
  <div class="item tall">Dieser Text ist länger und zeigt, dass die Zeile über die 80px Mindesthöhe hinaus wachsen kann, wenn der Inhalt es verlangt.</div>
  <div class="item">Kurz</div>
</div>
</div>

Barrierefreiheit

grid-auto-flow: dense ist aus Barrierefreiheitssicht besonders problematisch. Der dense-Algorithmus ordnet Items visuell um, um Lücken im Grid zu füllen, aber die DOM-Reihenfolge bleibt unverändert. Das Ergebnis: Sehende Nutzer sehen eine andere Reihenfolge als Screenreader-Nutzer, und die Tab-Reihenfolge für Tastaturnutzer ergibt keinen visuellen Sinn mehr.

Wann ist dense ein Problem?

Immer bei interaktiven Inhalten: Formulare, Navigation, Artikellisten mit Links, also alles, wo die Reihenfolge wichtig ist.
Bei Inhalten mit semantischem Zusammenhang: Wenn Item 1 logisch vor Item 2 kommt (z.B. Kapitel in einem Kurs), darf dense sie nicht umordnen.

Wann ist dense okay?

Bildergalerien ohne Text: Wenn die Reihenfolge der Bilder egal ist und es keine interaktiven Elemente gibt.
Dekorative Grids: Pattern-Hintergründe oder rein visuelle Elemente ohne semantische Bedeutung.

Fazit: Verwende dense nur, wenn die Reihenfolge der Items tatsächlich keine Rolle spielt. Im Zweifelsfall: Finger weg und die Lücken akzeptieren.

Häufige Fehler

5 Fehler

01 grid-template-rows vs. grid-auto-rows verwechseln

grid-template-rows definiert die Größe von expliziten Zeilen. grid-auto-rows definiert die Größe von impliziten Zeilen (die der Browser automatisch erstellt). Wenn du nur grid-template-rows setzt, haben überschüssige Zeilen die Standardgröße auto.

02 dense ändert die visuelle Reihenfolge

Der dense-Algorithmus verschiebt Items im Layout, ohne die DOM-Reihenfolge zu ändern. Das kann Tastaturnavigation und Screenreader verwirren. Verwende dense nur, wenn die visuelle Reihenfolge nicht wichtig ist (z.B. Bildergalerien).

03 column ohne explizite Zeilen

Wenn du grid-auto-flow: column setzt, aber keine Zeilen mit grid-template-rows definierst, landen alle Items in einer einzigen Zeile. Du brauchst explizite Zeilen, damit der Column-Flow mehrere Spalten erzeugt.

04 grid-auto-rows ohne Wirkung bei leerem Grid

Wenn alle Zeilen explizit definiert sind und es keine überschüssigen Items gibt, hat grid-auto-rows keinen Effekt. Es wirkt nur auf implizite Zeilen.

05 dense ordnet nur “rückwärts”

Der dense-Algorithmus füllt Lücken, indem er spätere Items nach vorne verschiebt. Er verschiebt niemals ein Item, das bereits platziert wurde. Items mit expliziter Platzierung bleiben immer an ihrer Position.

Browser-Kompatibilität

5 von 5

grid-auto-flow und die zugehörigen Eigenschaften werden von allen modernen Browsern vollständig unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Grid-Auto-Eigenschaften haben in HTML-Emails sehr eingeschränkten Support. Für E-Mail-Layouts solltest du auf Tabellen-basierte Layouts zurückgreifen.

Apple Mail

Teilweise

Grundlegende Auto-Eigenschaften werden unterstützt
Gmail

Keine

Grid wird komplett ignoriert
Outlook

Keine

Kein Grid-Support, Tabellen-Layouts verwenden
Thunderbird

Teilweise

Grundlegende Auto-Eigenschaften werden unterstützt
Yahoo Mail

Keine

Kein Grid-Support

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da