CSS Grid: Komplexe Layouts ohne Raterei erstellen

Warum Grid so lange gebraucht hat, bis ich es wirklich gelernt habe

Ich habe CSS Grid laenger gemieden als ich sollte. Flexbox erledigte das meiste, was ich brauchte, und jedes Mal, wenn ich die Grid-Dokumentation oeffnete, stiess ich auf Begriffe wie "implizite Tracks" und "benannte Grid-Linien" und schloss den Tab wieder. Es fuhlte sich nach Overkill an.

Was mich umstimmte, war der Versuch, ein Dashboard-Layout mit Flexbox zu bauen. Ich hatte eine Sidebar, einen Header, einen Hauptinhaltsbereich und einen Footer, und ich verschachtelte Flex-Container drei Ebenen tief, nur damit die Dinge ausgerichtet waren. Es funktionierte -- kaum -- aber jedes Mal, wenn sich das Design aenderte, musste ich das HTML umstrukturieren. Als jemand mich auf Grid hinwies, habe ich das Ganze in etwa einer Stunde in 30 Zeilen CSS umgeschrieben. Das HTML hat sich kaum veraendert.

Das ist es, was Grid kann, was Flexbox nicht kann: Sie koennen das Layout in zwei Dimensionen gleichzeitig vom Container aus definieren, ohne sich um das Verschachteln von Elementen zu kuemmern. Sie definieren die Struktur, und die Elemente fuegen sich ein.

Dieser Leitfaden deckt alles ab, was Sie tatsaechlich fuer den taeglichen Einsatz von Grid benoetigen -- die Kerneigenschaften, die seltsamen aber nuetzlichen Funktionen und die Muster, die ich in echten Projekten verwendet habe. Wenn Sie beim Lesen visuell experimentieren moechten, koennnen Sie mit dem CSS Grid Generator auf ToolBox Hubs Spalten, Zeilen und Abstaende konfigurieren und das generierte CSS in Echtzeit sehen.

---

Das mentale Modell

Vor jedem Code zuerst das mentale Modell: CSS Grid bittet Sie, ueber das Layout so zu denken, wie ein Grafikdesigner ueber ein Layout-Raster nachdenkt. Sie definieren eine Reihe horizontaler und vertikaler Linien, und diese Linien erzeugen Zellen. Dann platzieren Sie Inhalte in diese Zellen, oder lassen den Browser das automatisch erledigen.

Das unterscheidet sich grundlegend von Flexbox, wo das Layout von den Elementen selbst bestimmt wird -- Sie legen Eigenschaften an den Elementen fest, die ihnen sagen, wie sie wachsen, schrumpfen oder ausgerichtet werden sollen. Grid kehrt das um. Das Layout wird am Container definiert, und die Elemente folgen.

---

Ein Grid definieren

Es beginnt mit einer Eigenschaft:

.container {
  display: grid;
}

Das macht allein nicht viel. Elemente werden standardmaessig in einer einzigen Spalte gestapelt. Das Interessante ist die Definition von Tracks.

grid-template-columns und grid-template-rows

Diese definieren Ihre Spalten- und Zeilengroessen. Die Werte sind eine durch Leerzeichen getrennte Liste von Track-Groessen.

.container {
  display: grid;
  grid-template-columns: 200px 400px 200px;
  grid-template-rows: 100px auto 60px;
}

Das erzeugt drei Spalten (200px, 400px, 200px) und drei Zeilen (100px, was auch immer der Inhalt benoetigt, 60px). Elemente werden von links nach rechts, von oben nach unten in Zellen platziert.

Sie koennen jede CSS-Laengeneinheit verwenden: px, em, rem, %, vw. Aber die nuetzlichste Einheit, die Grid eingefuehrt hat, ist brandneu.

---

Die fr-Einheit

Die fr-Einheit steht fuer Fraktion. Sie repraesentiert einen Anteil des verfuegbaren freien Platzes im Grid-Container. Hier ist, warum sie so viel besser als Prozentsaetze ist:

/* Prozentsatz-Ansatz -- Sie muessen rechnen */
.container {
  display: grid;
  grid-template-columns: 25% 50% 25%;
}

/* fr-Ansatz -- Sie beschreiben nur die Verhaeltnisse */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Beide erzeugen dasselbe Layout, aber fr behandelt Luecken korrekt. Wenn Sie ein gap zwischen Spalten hinzufuegen und Prozentsaetze verwenden, ueberschreitet die Gesamtbreite 100% und es entsteht ein Ueberlauf. Mit fr berechnet der Browser den freien Platz nach Abzug der Luecken und verteilt ihn dann. Viel weniger Rechnen.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
  /* Der Browser zieht erst die zwei 24px-Luecken ab,
     dann teilt er den Rest im Verhaeltnis 1:2:1 auf */
}

Sie koennen auch feste Breiten mit fr-Einheiten mischen, was bei den meisten echten Layouts der Fall ist:

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  /* Sidebar ist immer 280px, Inhalt nimmt alles andere */
}

Dieses Muster -- feste Sidebar, flexibler Inhalt -- verwende ich staendig.

---

Die repeat()-Funktion

Wenn Sie viele gleichbreite Spalten haben, wird es muehsam, sie von Hand aufzuschreiben. repeat() ist die Kurzschreibweise:

/* Ohne repeat */
.grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Mit repeat */
.grid {
  grid-template-columns: repeat(4, 1fr);
}

repeat(4, 1fr) bedeutet "vier Tracks, jeder 1fr breit". Sie koennen auch komplexe Muster wiederholen:

.grid {
  grid-template-columns: repeat(3, 100px 1fr);
  /* Erzeugt: 100px 1fr 100px 1fr 100px 1fr */
}

Aber die wirklich maechtige Version kombiniert repeat() mit zwei speziellen Schluesselwoertern.

---

auto-fill und auto-fit

Hier wird Grid von "nuetzlich" zu "fast magisch". Statt einer genauen Spaltenanzahl koennen Sie dem Browser sagen, so viele Spalten zu erstellen, wie passen:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 16px;
}

Das erzeugt ein Grid, das die Anzahl der Spalten automatisch basierend auf der Container-Breite anpasst. Auf einem breiten Bildschirm bekommt man vielleicht 5 Spalten, auf einem schmalen Bildschirm 2. Keine Media Queries erforderlich.

Der Unterschied zwischen auto-fill und auto-fit ist subtil aber bedeutsam:

auto-fill erstellt so viele Tracks, wie passen, einschliesslich leerer. Wenn Sie nur 3 Elemente haben, aber das Grid 6 Spalten fassen koennte, erhalten Sie 6 Spalten -- die letzten 3 sind leer, nehmen aber Platz ein.

auto-fit erstellt ebenfalls so viele Tracks, wie passen, aber bricht leere Tracks auf null Breite zusammen. Wenn Sie 3 Elemente in einem Grid haben, das 6 fassen koennte, kollabieren die leeren Tracks und Ihre 3 Elemente strecken sich, um den verfuegbaren Platz zu fuellen.

/* auto-fill: leere Spalten behalten Platz */
.fill-grid {
  grid-template-columns: repeat(auto-fill, 200px);
}

/* auto-fit: Elemente dehnen sich, um den Container zu fuellen */
.fit-grid {
  grid-template-columns: repeat(auto-fit, 200px);
}

Welches verwendet werden soll, haengt vom Design ab. Fuer eine Fotogalerie, bei der Elemente eine einheitliche Groesse behalten sollen, ist auto-fill normalerweise besser. Fuer ein Karten-Grid, bei dem Elemente die Zeile fuellen sollen, ist auto-fit die richtige Wahl.

---

minmax()

Das letzte Stueck des Puzzles ist minmax(), das anstelle einer festen Groesse einen Groessenbereich fuer einen Track definiert. Es nimmt zwei Argumente: eine Mindestgroesse und eine Maximalgroesse.

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

Das erzeugt drei Spalten, die mindestens 200px breit und maximal 1fr des verfuegbaren Platzes sind. Auf einem breiten Bildschirm dehnen sie sich aus. Auf einem schmalen Bildschirm werden sie nie kleiner als 200px.

Die Kombination aus repeat(), auto-fill oder auto-fit und minmax() ist so verbreitet, dass sie zum kanonischen responsiven Grid-Muster geworden ist:

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

Lies das als: "Erstelle so viele Spalten, wie passen, jede mindestens 240px breit, jede wachst gleichmaessig, um verfuegbaren Platz zu fuellen." Elemente umbrechen automatisch. Keine Media Queries. Kein JavaScript. Das ist das Muster, das ich verwende, wenn ich schnell ein responsives Karten-Grid brauche.

---

Praxisbeispiel: Fotogalerie

Lassen Sie mich eine Fotogalerie von Grund auf erstellen, um zu zeigen, wie das in der Praxis aussieht.

<div class="gallery">
  <img src="photo-1.jpg" alt="...">
  <img src="photo-2.jpg" alt="...">
  <!-- more photos -->
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

Das war es. Das Grid berechnet automatisch, wie viele Spalten in den Container passen. Bilder behalten ein quadratisches Seitenverhaeltnis mit aspect-ratio, und object-fit: cover kuemmert sich um das Zuschneiden. Auf einem Handy bekommt man vielleicht 2 Spalten, auf einem breiten Desktop vielleicht 6. Das Layout ist von Natur aus responsiv, nicht durch eine Liste von Breakpoints.

Wenn Sie bestimmte Fotos hervorheben moechten, koennen Sie sie ueber mehrere Zellen spannen:

.gallery img:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

Das laesst das erste Foto einen 2x2-Block einnehmen, waehrend der Rest drum herum fliesst. Keine Positionstricks, keine Floats -- nur Grid-Platzierung.

---

Praxisbeispiel: Dashboard-Layout

Das ist der Anwendungsfall, der mich von Grid ueberzeugt hat. Ein Dashboard mit Sidebar, Header, Hauptinhalt und Footer.

<div class="dashboard">
  <header class="dash-header">Header</header>
  <nav class="dash-sidebar">Sidebar</nav>
  <main class="dash-main">Main Content</main>
  <footer class="dash-footer">Footer</footer>
</div>

.dashboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  min-height: 100vh;
  gap: 0;
}

.dash-header  { grid-area: header; }
.dash-sidebar { grid-area: sidebar; }
.dash-main    { grid-area: main; }
.dash-footer  { grid-area: footer; }

Die Eigenschaft grid-template-areas macht das besonders lesbar. Sie zeichnen das Layout im Grunde in ASCII-Kunst. Header und Footer spannen beide Spalten. Die Sidebar ist 260px. Der Hauptinhalt fuellt alles andere.

Das responsiv zu machen ist unkompliziert:

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto 1fr 40px;
    grid-template-areas:
      'header'
      'sidebar'
      'main'
      'footer';
  }
}

Auf einem Handy stapelt sich alles in einer einzigen Spalte. Die Sidebar klappt unter den Header. Sauber.

---

Grid vs. Flexbox: Die echte Antwort

Manche behandeln das so, als ob man sich fuer eine Seite entscheiden muesste. Das muss man nicht. Sie loesen unterschiedliche Probleme.

Grid verwenden, wenn:

• Zeilen und Spalten miteinander ausgerichtet sein muessen
• Sie eine Seitenstruktur bauen (Header, Sidebar, Main, Footer)
• Elemente mehrere Zeilen oder Spalten ueberspannen muessen
• Sie das Layout vom Container aus definieren moechten, nicht von den Elementen
• Sie ein konsistentes Karten-Grid mit ausgerichteten Inhaltsbereichen in jeder Karte bauen

Flexbox verwenden, wenn:

• Sie eine einzige Zeile oder Spalte von Elementen haben
• Elemente sich basierend auf ihrem Inhalt selbst dimensionieren muessen
• Sie Navigationslinks, Buttons oder Formulareingaben inline anordnen
• Elemente umbrechen muessen, aber die Ausrichtung ueber Zeilen hinweg egal ist

In den meisten Projekten verwende ich beides. Grid bearbeitet das Seitenskelett. Flexbox bearbeitet die Komponenteninnereien -- die Navigationsleiste, die Schaltflaechen-Gruppe innerhalb einer Karte, das Formularlayout. Sie ergaenzen sich, sie konkurrieren nicht.

Die klarste Regel, die ich gehoert habe: "Grid ist fuer Layout. Flexbox ist fuer Ausrichtung." Es ist eine Vereinfachung, aber sie wird Sie meistens in die richtige Richtung lenken.

---

Den CSS Grid Generator verwenden

Wenn Sie ein Grid-Layout bauen und das Ergebnis sehen moechten, bevor Sie es in Code festschreiben, lohnt es sich, den CSS Grid Generator auf ToolBox Hubs zu oeffnen. Sie koennen die Anzahl der Spalten und Zeilen festlegen, den Abstand anpassen, Spalten- und Zeilengroessen visuell konfigurieren und den genauen CSS-Output zum Einsetzen in Ihr Projekt erhalten.

Es ist besonders nuetzlich, wenn Sie mit grid-template-areas arbeiten -- zu visualisieren, welche Bereiche welche Zellen umfassen, ist mit einem visuellen Tool viel einfacher als Code zu starren. Sie konfigurieren das Layout einmal, kopieren das CSS und fuegen es ein. Schneller als von Hand schreiben und ein guter Weg, eine Layout-Idee schnell zu testen, bevor Sie sie umsetzen.

---

Browser-Unterstuetzung und echte Einschraenkungen

Grid hat starke Browser-Unterstuetzung -- jeder moderne Browser hat seit 2017 vollstaendige Unterstuetzung. Sie brauchen keine Vendor-Praefixe. Sie brauchen kein Polyfill. Schreiben Sie es, schicken Sie es ab.

Der einzige echte Vorbehalt: Internet Explorer 11. IE 11 hat eine aeltere Grid-Implementierung (basierend auf einem fruehen Entwurf) mit -ms--praefixierten Eigenschaften, die weitgehend mit moderner Grid-Syntax inkompatibel sind. Wenn Ihre Analytik IE-11-Traffic zeigt, dem Sie wichtig sind, muss die Grid-Nutzung sorgfaeltig abgewaegt oder eine Fallback-Loesung erstellt werden.

Fuer alle, die IE 11 nicht unterstuetzen -- was ehrlich gesagt die meisten von uns jetzt sind -- ist Grid ohne Vorbehalte produktionsreif.

Eine Eigenschaft, bei der Vorsicht geboten ist: subgrid. Es ermoeglicht untergeordneten Grids, die Track-Definitionen des uebergeordneten Grids zu erben und daran teilzunehmen, was fuer die Ausrichtung verschachtelter Inhalte nuetzlich ist. Safari fuegte 2023 Unterstuetzung hinzu, Chrome Ende 2023. Stand Anfang 2026 ist die Unterstuetzung breit stabil, aber wenn Sie auf Projekten mit aelteren Browsern im Scope aufbauen, ueberpruefen Sie Ihre spezifischen Ziele.

---

Die Eigenschaften, die Sie wirklich verwenden werden

Nach der Arbeit mit Grid in mehreren Projekten sind das die Eigenschaften, auf die ich am haeufigsten zurueckgreife:

/* Die Kerndefinition */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-template-rows: auto;

/* Benannte Bereiche fuer komplexe Layouts */
grid-template-areas: 'header' 'sidebar main' 'footer';

/* Elemente platzieren */
grid-column: span 2;
grid-row: span 2;

/* Oder explizite Platzierung */
grid-column: 1 / 3; /* beginnt an Linie 1, endet an Linie 3 */
grid-row: 2 / 4;

/* Abstands */
gap: 24px;
column-gap: 24px;
row-gap: 16px;

Die impliziten Grid-Eigenschaften (grid-auto-rows, grid-auto-columns) sind es auch wert, sie zu kennen. Wenn Elemente automatisch in Zeilen platziert werden, die nicht explizit definiert wurden, legt grid-auto-rows ihre Hoehe fest:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px; /* alle automatisch platzierten Zeilen sind 200px hoch */
}

Und wenn Sie moechten, dass automatisch platzierte Elemente Spalten statt Zeilen fuellen, kehrt grid-auto-flow: column die Platzierungsrichtung um.

---

Was mir klar wurde

Der Moment, in dem Grid nicht mehr einschuechternd wirkte, war, als ich aufhoerte, jede Eigenschaft zu memorieren, und einfach drei Dinge verinnerlichte:

1. Sie definieren Spalten und Zeilen am Container, nicht an den Elementen.
2. Die fr-Einheit verteilt freien Platz proportional.
3. repeat(auto-fill, minmax(min, 1fr)) ist das Muster fuer responsive Grids.

Alles andere -- benannte Bereiche, Spanning, explizite Platzierung -- koennen Sie bei Bedarf nachschlagen. Aber diese drei Konzepte bringen Sie durch 80% der realen Grid-Nutzung.

CSS Grid ist eines dieser Tools, das sich nach dem Verstehen wie fuer Sie arbeitet. Ein Layout, das 2015 50 Zeilen Floats oder tief verschachteltes Flexbox benoetigt haette, braucht jetzt 10 Zeilen Grid. Das ist eine echte Verbesserung der Lebensqualitaet, und nach einer Weile werden Sie Muehe haben, sich zu erinnern, wie Layout vor ihm gefuehlt hat.