CSS Grid lernen: Der komplette Einsteiger-Leitfaden 2026

Mateusz Viola

Frontend-Redaktion · Aktualisiert: Juni 2026

CSS Grid ist die mit Abstand mächtigste Methode, um Layouts im Web zu bauen. Wer einmal verstanden hat, wie ein Container seine Kinder in Zeilen und Spalten einsortiert, baut Galerien, Dashboards und ganze Seiten in einem Bruchteil der Zeit, die früher mit Floats oder verschachtelten div-Türmen nötig war. Dieser Leitfaden führt dich von Null aus durch die Grundlagen: Du startest mit einem leeren Container, lernst Schritt für Schritt jede wichtige Eigenschaft kennen und baust am Ende ein vollständiges, klassisches Seitenlayout. Jeden Schritt kannst du direkt im CSS Grid Generator nachklicken und dir den passenden Code ausgeben lassen.

Was CSS Grid ist und wann du es brauchst

CSS Grid Layout, offiziell als CSS Grid Layout Module Level 1 vom W3C spezifiziert, ist ein zweidimensionales Layout-System. Das ist der entscheidende Unterschied zu allem, was es vorher gab. Floats, Tabellen oder Inline-Block waren immer Behelfslösungen für ein Problem, für das CSS lange kein eigenes Werkzeug hatte: Elemente gleichzeitig in Zeilen und Spalten anzuordnen und dabei volle Kontrolle über beide Achsen zu behalten.

Du legst ein Raster aus unsichtbaren Linien an, die Spalten und Zeilen begrenzen. Die Felder dazwischen heißen Zellen, der Bereich zwischen mehreren Zellen ist ein Bereich (Area). Deine Inhalte, die Grid-Items, setzt du anschließend in dieses Raster, entweder automatisch oder ganz gezielt auf bestimmte Linien.

Faustregel für die Praxis: Sobald ein Layout in beide Richtungen strukturiert ist, etwa eine Seite mit Kopf, Seitenleiste, Inhalt und Fuß, ist Grid das richtige Werkzeug. Geht es nur um eine einzelne Reihe oder Spalte, zum Beispiel eine Navigationsleiste mit Buttons nebeneinander, ist Flexbox oft einfacher. Beide Systeme schließen sich nicht aus, sie ergänzen sich: Ein Grid-Item kann selbst wieder ein Flex-Container sein.

Dein erstes Grid: Container und Items

Jedes Grid besteht aus genau zwei Rollen. Das Elternelement, auf dem display: grid steht, ist der Grid-Container. Alle direkten Kindelemente werden dadurch automatisch zu Grid-Items. Wichtig: nur die direkten Kinder, nicht die Enkel. Das ist der häufigste Stolperstein am Anfang.

Hier ist das minimal mögliche Grid. Ein Container mit drei Boxen, aufgeteilt in drei gleich breite Spalten:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

Spalten und Zeilen definieren

Die beiden zentralen Eigenschaften heißen grid-template-columns für die Spalten und grid-template-rows für die Zeilen. Jeder Wert, den du angibst, beschreibt eine Spur (track), also eine Spalte oder Zeile. grid-template-columns: 200px 1fr 200px erzeugt drei Spalten: eine feste linke und rechte Spalte von je 200 Pixeln und eine flexible Mitte, die den Rest füllt.

Statt Werte zu wiederholen, nutzt du die Funktion repeat(). repeat(4, 1fr) ist die Kurzform für 1fr 1fr 1fr 1fr und erzeugt vier gleich breite Spalten. Das spart Tipparbeit und macht spätere Änderungen einfacher.

Wenn du keine Zeilen explizit definierst, legt Grid sie automatisch an, sobald Items in einer neuen Reihe landen. Die Höhe dieser impliziten Zeilen steuerst du mit grid-auto-rows. So bleibt eine Kartengalerie aufgeräumt, auch wenn du nicht weißt, wie viele Karten am Ende vorhanden sind.

Die richtigen Einheiten: fr, px, auto, minmax

Welche Einheit du für eine Spur wählst, entscheidet darüber, wie sich das Layout bei verschiedenen Bildschirmgrößen verhält. Diese vier solltest du sicher beherrschen:

Die fr-Einheit verteilt nur den Platz, der nach festen Werten und gap übrig bleibt.

Der Klassiker für responsive Layouts kombiniert repeat(), auto-fit und minmax(). Damit passt sich die Spaltenanzahl ganz ohne Media Query an die verfügbare Breite an:

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

Jede Karte ist mindestens 220 Pixel breit und höchstens ein gleicher Anteil des Platzes. Sobald eine weitere Karte hineinpasst, fügt Grid automatisch eine Spalte hinzu. Die Details zu auto-fit gegen auto-fill behandelt der Responsive-Grid-Ratgeber.

Items gezielt platzieren

Bis hierhin hat Grid die Items automatisch einsortiert. Manchmal soll ein Element aber über mehrere Spalten gehen oder an einer bestimmten Stelle sitzen. Dafür gibt es die Grid-Linien. Bei drei Spalten gibt es vier vertikale Linien, von 1 ganz links bis 4 ganz rechts.

Mit grid-column: 1 / 3 sagst du einem Item, es soll von Linie 1 bis Linie 3 reichen, also zwei Spalten überspannen. Bequemer ist oft grid-column: span 2: das Item belegt zwei Spalten, egal wo es startet. Analog funktioniert grid-row für die Zeilen.

.hervorgehoben {
  grid-column: 1 / 3;   /* zwei Spalten breit */
  grid-row: 1 / 2;
}

Für größere Layouts lohnt sich der lesbarere Weg über benannte Bereiche mit grid-template-areas. Statt mit Liniennummern zu jonglieren, gibst du den Bereichen Namen wie header oder sidebar. Wie das genau funktioniert, zeigt der Ratgeber zu grid-template-areas.

Inhalte ausrichten und Lücken setzen

Den Abstand zwischen den Spuren steuerst du mit gap, früher grid-gap genannt. Du kannst einen Wert für beide Achsen angeben oder zwei getrennte: gap: 24px 16px bedeutet 24 Pixel zwischen Zeilen und 16 Pixel zwischen Spalten.

Für die Ausrichtung innerhalb der Zellen gibt es zwei Achsen. justify-items richtet horizontal aus, align-items vertikal. Beide zusammen kürzt place-items ab. place-items: center zentriert jeden Inhalt perfekt in seiner Zelle, eine der saubersten Methoden, überhaupt etwas in CSS zu zentrieren.

Praxis: ein komplettes Seitenlayout

Jetzt bauen wir das klassische Layout, das fast jede Webseite hat: Kopfzeile oben, Seitenleiste links, Hauptinhalt rechts, Fußzeile unten. Mit benannten Bereichen ist der Code fast selbsterklärend:

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

.kopf    { grid-area: header;  }
.seitenleiste { grid-area: sidebar; }
.inhalt  { grid-area: inhalt;  }
.fuss    { grid-area: footer;  }

Die drei Zeilen in grid-template-areas sind eine kleine ASCII-Karte des Layouts. Header und Footer ziehen sich über beide Spalten, weil ihr Name zweimal nebeneinander steht. Wer das Layout später für Mobilgeräte umbauen will, ändert nur die Areas in einer Media Query, der HTML-Code bleibt unangetastet.

Genau dieses Vorgehen kannst du im Generator visuell zusammenklicken: Spalten und Zeilen einstellen, Bereiche benennen, Vorschau prüfen und den fertigen CSS-Code kopieren, ohne eine einzige Liniennummer von Hand zu zählen.

Typische Anfängerfehler

• display: grid auf das falsche Element setzen. Nur die direkten Kinder des Containers werden zu Items. Liegt dein Inhalt eine Ebene tiefer, greift das Grid nicht.
• Höhe vergessen. Ein Grid ist standardmäßig nur so hoch wie sein Inhalt. Soll die Seitenleiste die volle Höhe haben, braucht der Container eine Höhe wie min-height: 100vh.
• Margin statt gap. Abstände zwischen Items gehören in gap, nicht in Margins der Items. Margins erzeugen ungleiche Ränder und brechen die Ausrichtung.
• Visuelle Reihenfolge gegen Quellreihenfolge. Mit Grid kannst du Items optisch umsortieren. Screenreader und Tastaturnutzer folgen aber der HTML-Reihenfolge. Ein zu starkes Umsortieren schadet der Barrierefreiheit, ein Punkt, den die WCAG ausdrücklich aufgreift.

Häufige Fragen zu CSS Grid

Quellen

• MDN Web Docs: CSS Grid Layout
• MDN Web Docs: Grundkonzepte des Grid Layouts
• W3C: CSS Grid Layout Module Level 1
• W3C WAI: Understanding Success Criterion 1.3.2: Meaningful Sequence
• Can I use: CSS Grid Layout Browser-Support

Verwandte Artikel