HTML & CSS

CSS Grid: Zweidimensionale Layouts meistern

CSS Grid bringt Zeilen und Spalten gleichzeitig unter Kontrolle. Du lernst, wie du komplexe Raster definierst und Elemente präzise platzierst.

Anton

— 2 Min. Lesezeit
Teilen
CSS Grid: Zweidimensionale Layouts meistern

Während Flexbox sich um eine Achse kümmert, denkt CSS Grid in zwei Dimensionen gleichzeitig: Zeilen und Spalten. Damit baust du echte Raster, die früher nur mit Tabellen oder umständlichen Tricks möglich waren. In diesem Beitrag lernst du, wie du ein Grid definierst, Spalten und Zeilen festlegst und Elemente gezielt platzierst.

Der Grid-Container

Wie bei Flexbox beginnt alles mit dem Container. Mit display: grid und der Eigenschaft grid-template-columns legst du die Spalten fest:

.raster {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 16px;
}
<div class="raster">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Hier entstehen drei Spalten zu je 200 Pixeln. Das gap sorgt wie bei Flexbox für gleichmäßige Abstände zwischen den Zellen.

Die fr-Einheit für flexible Spalten

Feste Pixelbreiten sind selten ideal. Die Einheit fr steht für einen Bruchteil des verfügbaren Platzes und verteilt den Raum automatisch:

/* Drei gleich breite Spalten */
.gleich {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Mittlere Spalte doppelt so breit */
.gewichtet {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Die fr-Einheit passt sich automatisch der Containerbreite an, was sie ideal für responsive Layouts macht.

Wiederholungen mit repeat

Wenn du viele gleiche Spalten brauchst, hilft die Funktion repeat. In Kombination mit minmax und auto-fill entstehen sogar selbst anpassende Raster:

/* Vier gleich breite Spalten, kurz geschrieben */
.vierspalten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* Automatisch so viele Spalten wie passen */
.auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Das zweite Beispiel ist ein Klassiker für Galerien: Die Spalten sind mindestens 200 Pixel breit und füllen die Reihe automatisch auf.

Elemente gezielt platzieren

Mit grid-column und grid-row bestimmst du, über wie viele Spalten oder Zeilen sich ein Element erstreckt. So baust du komplexe Anordnungen:

.raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Dieses Element überspannt zwei Spalten */
.breit {
  grid-column: span 2;
}

/* Element von Spaltenlinie 1 bis 4 */
.voll {
  grid-column: 1 / 4;
}

Die Spaltenlinien werden von links beginnend nummeriert. Bei drei Spalten gibt es vier Linien, von 1 bis 4.

Benannte Bereiche mit grid-template-areas

Für übersichtliche Seitenlayouts kannst du Bereiche benennen. Das macht den Code fast selbsterklärend:

.seite {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "kopf kopf"
    "menue inhalt"
    "fuss fuss";
  gap: 16px;
}

.kopf   { grid-area: kopf; }
.menue  { grid-area: menue; }
.inhalt { grid-area: inhalt; }
.fuss   { grid-area: fuss; }
<div class="seite">
  <header class="kopf">Kopf</header>
  <nav class="menue">Menü</nav>
  <main class="inhalt">Inhalt</main>
  <footer class="fuss">Fuß</footer>
</div>

Fazit

CSS Grid ist das Werkzeug der Wahl für zweidimensionale Layouts. Mit grid-template-columns und der fr-Einheit definierst du flexible Raster, mit repeat und minmax baust du automatisch anpassende Galerien, und mit benannten Bereichen wird dein Seitenlayout selbsterklärend. In der Praxis ergänzen sich Grid und Flexbox hervorragend: Grid für die grobe Seitenstruktur, Flexbox für die Anordnung innerhalb einzelner Komponenten. Probiere beide aus und du wirst schnell ein Gefühl dafür bekommen, wann welches Werkzeug passt.

Weiterlesen