CSS Grid: Zweidimensionale Layouts sicher aufbauen

Wenn du dich mit Flexbox schon wohlfühlst, hast du das Werkzeug für eine Richtung gemeistert – eine Reihe oder eine Spalte. Aber echte Seitenlayouts leben in zwei Dimensionen: Zeilen und Spalten gleichzeitig. Genau dafür gibt es CSS Grid. In diesem Beitrag baust du Schritt für Schritt ein sauberes, responsives Grid auf und lernst die wichtigsten Eigenschaften kennen, die du im Alltag wirklich brauchst.

Grid vs. Flexbox: Wann nimmst du was?

Die Faustregel ist einfach: Flexbox ist eindimensional, Grid ist zweidimensional. Flexbox verteilt Elemente entlang einer Achse – ideal für eine Navigationsleiste, eine Button-Gruppe oder eine Kartenreihe. Sobald du aber Zeilen und Spalten zugleich kontrollieren willst, etwa ein Seitengerüst mit Header, Sidebar, Content und Footer, spielt Grid seine Stärke aus.

Beide schließen sich nicht aus. In der Praxis nutzt du oft Grid für das grobe Seitenraster und Flexbox innerhalb einzelner Grid-Zellen für die Feinausrichtung. Es ist kein Entweder-oder, sondern ein Zusammenspiel.

Dein erstes Grid: Spalten und Zeilen definieren

Ein Grid entsteht, sobald du einem Container display: grid gibst. Mit grid-template-columns legst du fest, wie viele Spalten es gibt und wie breit sie sind. gap sorgt für gleichmäßige Abstände zwischen den Zellen – ohne Rand-Gebastel mit margin.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
  gap: 16px;
}

Dieses Grid hat drei feste Spalten zu je 200 Pixeln und zwei Zeilen zu je 100 Pixeln. Die Kindelemente rutschen automatisch der Reihe nach in die Zellen – du musst sie nicht einzeln positionieren. Das ist der große Komfort von Grid: Der Container gibt das Raster vor, die Kinder ordnen sich ein.

Die fr-Einheit und repeat(): flexibel statt starr

Feste Pixelwerte sind selten das, was du willst. Die fr-Einheit (von „fraction“, also Anteil) verteilt den verfügbaren Platz proportional. 1fr 1fr bedeutet zwei gleich breite Spalten, 2fr 1fr macht die erste doppelt so breit wie die zweite.

Damit du 1fr nicht zwölfmal hintereinander schreiben musst, gibt es repeat():

.container {
  display: grid;
  /* Drei gleich breite Spalten */
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sidebar-layout {
  display: grid;
  /* Schmale Sidebar, breiter Hauptbereich */
  grid-template-columns: 250px 1fr;
  gap: 24px;
}

Der Charme der fr-Einheit: Sie rechnet den gap automatisch mit ein. Du musst also nicht mühsam ausrechnen, wie viel Breite die Abstände fressen – der Browser erledigt das für dich.

Elemente gezielt platzieren mit grid-column

Manchmal soll ein Element mehr als eine Zelle einnehmen – zum Beispiel ein Header, der über die gesamte Breite geht. Mit grid-column und grid-row steuerst du das über die Rasterlinien. Wichtig: Grid zählt die Linien, nicht die Spalten, und es beginnt bei 1.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.header {
  /* Von Linie 1 bis Linie 5 – also über alle 4 Spalten */
  grid-column: 1 / 5;
}

.featured {
  /* Nimmt zwei Spalten ein */
  grid-column: span 2;
}

Die Schreibweise 1 / 5 heißt „von Linie 1 bis Linie 5“. Alternativ sagst du mit span 2 einfach „überspanne zwei Spalten“, ohne die konkreten Linien zu kennen – oft die lesbarere Variante.

Benannte Bereiche mit grid-template-areas

Für ganze Seitengerüste gibt es eine besonders anschauliche Methode: Du malst das Layout mit Namen als kleine ASCII-Karte. Das macht die Struktur auf einen Blick verständlich.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  gap: 16px;
  min-height: 100vh;
}

.page > header  { grid-area: header; }
.page > nav     { grid-area: sidebar; }
.page > main    { grid-area: content; }
.page > footer  { grid-area: footer; }

Jeder Bereich wird per grid-area einem Namen zugeordnet. Willst du die Sidebar auf dem Handy unter den Content schieben, änderst du nur die grid-template-areas in einer Media Query – die HTML-Struktur bleibt unangetastet.

Responsive Grids fast ohne Media Queries

Der vielleicht schönste Trick: Ein Grid, das sich selbst an die verfügbare Breite anpasst. Die Kombination aus auto-fit und minmax() sorgt dafür, dass so viele Spalten entstehen, wie hineinpassen – jede mindestens 220 Pixel breit, aber maximal ein gleichmäßiger Anteil.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

minmax(220px, 1fr) heißt: mindestens 220 Pixel, höchstens ein voller Anteil des freien Platzes. Wird der Bildschirm schmaler, reduziert der Browser die Spaltenzahl automatisch – vom vierspaltigen Desktop-Raster bis zur einspaltigen Handy-Ansicht, ganz ohne einen einzigen Breakpoint. Genau solche Karten-Layouts, für die du früher viel CSS gebraucht hättest, sind so in einer Zeile erledigt.

Fazit

CSS Grid nimmt dir die mühsame Arbeit ab, Layouts in zwei Dimensionen von Hand zusammenzusetzen. Merke dir die Kernwerkzeuge: display: grid öffnet das Raster, grid-template-columns mit fr und repeat() definiert flexible Spalten, grid-column platziert Elemente gezielt, und auto-fit mit minmax() macht das Ganze fast von allein responsiv. Am schnellsten lernst du es, indem du ein kleines Karten-Layout nachbaust und mit den Werten spielst. Und denk dran: Grid und Flexbox sind Partner – nutze Grid fürs große Raster und Flexbox für die Details darin.