Grid Auto Flow

Zuletzt aktualisiert am 15. Februar 2026

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.

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

grid-auto-flow

grid-auto-rows

grid-auto-columns

Beispiele

Implizite Zeilen mit fester Höhe

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.

.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>

grid-auto-flow: column

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.

.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>

Der dense-Algorithmus

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.

/* 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() für flexible implizite Zeilen

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

.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

• 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.
• 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).
• 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.
• 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.
• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften