CSS Grid

Was ist CSS Grid?

CSS Grid ist ein zweidimensionales Layout-System, das direkt in CSS integriert ist. Es ermöglicht es Ihnen, Elemente gleichzeitig in Zeilen und Spalten anzuordnen, wodurch Sie die volle Kontrolle darüber haben, wie Items auf einer Seite platziert, dimensioniert und ausgerichtet werden. Vor Grid waren Entwickler auf Floats, Tabellen oder Positioning-Hacks angewiesen, um komplexe Layouts zu erstellen. Grid hat all das durch einen einzigen, leistungsstarken Mechanismus ersetzt.

Der entscheidende Unterschied sind die zwei Dimensionen. Flexbox ordnet Items in einer einzigen Richtung an – entweder in einer Zeile oder einer Spalte. Grid ordnet Items in beiden Richtungen gleichzeitig an: Sie definieren Spalten und Zeilen und platzieren die Items dann in den resultierenden Zellen. Das macht es zur natürlichen Wahl für Layouts auf Seitenebene, Card-Grids, Dashboards und jedes Design, bei dem Items in einer strukturierten, zweidimensionalen Ebene angeordnet werden müssen.

Grid-Container und Grid-Items

Um Grid zu verwenden, setzt du display: grid auf einem Elternelement. Dieses Elternelement wird zum Grid-Container und seine direkten Kinder werden zu Grid-Items.

/* style.css */
.container {
  display: grid;
}

Sobald der Container ein Grid ist, definierst du, wie viele Spalten und Zeilen er hat, wie breit diese sind und wie die Items darin platziert werden. Items, die nicht explizit platziert wurden, werden automatisch vom Grid-Algorithmus positioniert und füllen die leeren Zellen der Reihe nach aus.

Grid-Template-Columns und Rows

Die grundlegendsten Grid-Properties sind grid-template-columns und grid-template-rows. Sie definieren die Tracks – also die Spalten und Zeilen – Ihres Grids.

/* style.css */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: auto 1fr auto;
}

• 200px 1fr 2fr erstellt drei Spalten: eine feste 200-Pixel-Spalte, gefolgt von zwei flexiblen Spalten, die den verbleibenden Platz in einem Verhältnis von 1 zu 2 aufteilen.
• auto 1fr auto erstellt drei Zeilen: die erste und die letzte passen sich eng an ihren Inhalt an (shrink-wrap), während die mittlere Zeile gestreckt wird, um die verfügbare Höhe auszufüllen.

Sie können auch die grid-template-columns-Shorthand verwenden, um alles an einer Stelle zu definieren:

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  gap: 1rem;
}

Die fr-Einheit

Die fr-Einheit steht für fraction of remaining space (Anteil am verbleibenden Platz). Sie verteilt den verfügbaren Platz proportional auf die Tracks, nachdem feste Größen berücksichtigt wurden.

/* style.css */
.grid {
  grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
}

/* style.css */
.grid {
  grid-template-columns: 200px 1fr 2fr; /* fixed + two flexible columns */
}

Im zweiten Beispiel nimmt die erste Spalte 200 Pixel ein, der Rest wird so aufgeteilt, dass die dritte Spalte doppelt so viel Platz erhält wie die zweite. Die fr-Einheit ist die gängigste Methode zur Dimensionierung von Grid-Tracks, da sie sich natürlich an den Container anpasst.

repeat(), auto-fill und auto-fit

Denselben Wert mehrfach zu schreiben, ist mühsam. Die repeat()-Funktion ermöglicht es, ein Track-Muster zu wiederholen:

/* style.css */
.grid {
  grid-template-columns: repeat(4, 1fr); /* four equal columns */
}

auto-fill und auto-fit gehen noch einen Schritt weiter. Sie wiederholen ein Track-Muster so oft, wie es in den Container passt:

/* style.css */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

• auto-fill erstellt so viele Tracks, wie hineinpassen, selbst wenn einige davon leer bleiben.
• auto-fit lässt leere Tracks kollabieren und streckt die verbleibenden, um den verfügbaren Platz auszufüllen.

In der Praxis verhalten sie sich identisch, wenn sie mit minmax() kombiniert werden, sodass die Wahl zwischen beiden selten einen Unterschied macht.

minmax()

minmax() definiert einen Bereich für die Spurgröße – ein Minimum und ein Maximum:

minmax(200px, 1fr)

Das bedeutet, dass die Spur mindestens 200 Pixel breit ist, aber bis zu 1fr des verbleibenden Platzes einnehmen kann. In Kombination mit auto-fill oder auto-fit ist minmax() der Motor hinter responsiven Grids, die sich ohne Media Queries anpassen.

Grid gap

Die gap-Eigenschaft legt den Abstand zwischen den Grid-Items fest:

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

Du kannst die Abstände für Zeilen und Spalten unabhängig voneinander definieren:

/* style.css */
.grid {
  row-gap: 1rem;
  column-gap: 2rem;
}

Gap erzeugt nur Platz zwischen den Items, nicht an den Rändern des Containers. Das ist sauberer, als den Grid-Items einzelne Margins zuzuweisen.

Gitternetzlinien und Gitterzellen

Gitternetzlinien (Grid lines) sind die horizontalen und vertikalen Trennlinien, die die Gitterstruktur definieren. Die Spalten werden von links nach rechts beginnend bei 1 nummeriert, die Zeilen von oben nach unten beginnend bei 1. Die Zwischenräume zwischen den Linien werden als Gitterzellen (grid cells) bezeichnet.

/* style.css */
.item {
  grid-column: 1 / 3; /* spans from line 1 to line 3 (two columns) */
  grid-row: 1 / 2;    /* spans from line 1 to line 2 (one row) */
}

Linien können auch negativ sein: -1 bezieht sich auf die letzte Linie. Das Verständnis dieser Linien ist essenziell für die präzise Platzierung von Elementen.

Platzierung von Grid-Items

Über Platzierungseigenschaften steuern Sie, wo jedes Item positioniert wird:

• grid-column — welche Spalten das Item belegt.
• grid-row — welche Zeilen das Item belegt.
• grid-area — eine Kurzschreibweise für row-start / column-start / row-end / column-end.

/* style.css */
.header {
  grid-column: 1 / -1; /* span all columns */
  grid-row: 1;
}

.sidebar {
  grid-column: 1;
  grid-row: 2 / 4;
}

.main {
  grid-column: 2 / -1;
  grid-row: 2 / 4;
}

Items, die nicht explizit platziert wurden, werden vom Grid-Algorithmus automatisch positioniert, wobei die Zellen von links nach rechts und von oben nach unten aufgefüllt werden.

Benannte Grid-Bereiche

grid-template-areas ermöglicht es Ihnen, Ihr Layout mithilfe von Strings zu definieren, indem Sie jeder Region einen Namen zuweisen:

/* style.css */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 1rem;
}

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

Das ist extrem gut lesbar. Sie sehen die Form des Layouts direkt im CSS, und das Umgestalten des Designs ist so einfach wie das Umschreiben des Strings für die Template-Bereiche.

Grid-Ausrichtung

Grid bietet leistungsstarke Steuerungsmöglichkeiten für die Ausrichtung, die sowohl auf den Container als auch auf einzelne Elemente angewendet werden können.

Ausrichtung auf Container-Ebene:

/* style.css */
.grid {
  justify-items: center;  /* align items horizontally within their cell */
  align-items: center;    /* align items vertically within their cell */
  justify-content: center; /* align the grid tracks within the container */
  align-content: center;   /* align the grid tracks vertically within the container */
}

Ausrichtung auf Element-Ebene:

/* style.css */
.item {
  justify-self: end;
  align-self: start;
}

Diese Properties verwenden dieselben Werte wie Flexbox — start, end, center, stretch und andere — sodass die Lernkurve flach ist, wenn du die Ausrichtung in Flexbox bereits kennst.

Gängige CSS Grid Patterns

Holy Grail Layout:

/* style.css */
.page {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}

Responsive Card-Grid:

/* style.css */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Dashboard mit fixierter Sidebar:

/* style.css */
.dashboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.dashboard-header { grid-column: 1 / -1; }
.dashboard-nav    { grid-area: nav / 1 / -1 / 2; }
.dashboard-main   { grid-area: main / 2 / -1 / 3; }

Full-bleed Content:

/* style.css */
.content {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

.content > * {
  grid-column: 2; /* center text in the narrow column */
}

Responsive Grids ohne Media Queries

Eine der größten Stärken von Grid ist der Aufbau responsiver Layouts ohne Media Queries. Die Kombination aus auto-fit + minmax() erledigt das für uns:

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

Wenn der Viewport schrumpft, klappen die Spalten automatisch zusammen. Wenn er wächst, erscheinen neue Spalten. Breakpoints sind nicht erforderlich. Dieses Pattern eignet sich hervorragend für Card-Grids, Bildergalerien, Formularfelder und fast jede Komponente, die sich anpassen muss.

Für mehr Kontrolle kannst du zusätzlich Media Queries einsetzen:

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

Wann man Grid vs. Flexbox verwendet

Die kurze Antwort: Grid für zwei Dimensionen, Flexbox für eine.

• Verwende Grid, wenn Elemente in Zeilen und Spalten angeordnet werden sollen – z. B. Seitenlayouts, Dashboards, Bildergalerien oder Card-Grids.
• Verwende Flexbox, wenn Elemente entlang einer einzigen Achse ausgerichtet oder verteilt werden sollen – z. B. Navigationsleisten, Formular-Layouts, das Zentrieren von Inhalten oder das Abstanden von Elementen in einer Reihe.

In der Praxis nutzen die meisten Projekte beides. Eine Seite verwendet möglicherweise Grid für das Gesamtlayout und Flexbox für einzelne Komponenten innerhalb dieser Grid-Bereiche. Sie ergänzen sich gegenseitig, anstatt miteinander zu konkurrieren.

Best Practices

• Verwende grid-template-areas für Seitenlayouts – das macht das Design übersichtlich und einfach umzustrukturieren.
• Bevorzuge auto-fit + minmax() für responsive Komponenten-Grids, anstatt für jeden Breakpoint eigene Media Queries zu schreiben.
• Nutze gap anstelle von Margins bei Grid-Items – so bleiben die Abstände konsistent und Lücken an den Rändern werden vermieden.
• Benenne deine Grid-Areas aussagekräftig – header, sidebar, main – und nicht area1, area2.
• Kombiniere Grid und Flexbox – Grid für das Makro-Layout, Flexbox für die Mikro-Ausrichtung innerhalb von Komponenten.
• Vermeide “Over-Gridding” – wenn eine einfache Flexbox-Zeile das Problem löst, greife nicht zu Grid.

Häufige Fehler

• grid für alles zu verwenden, obwohl Flexbox einfacher wäre.
• Zu vergessen, dass gap Margins ersetzt – was zu doppeltem Abstand zwischen den Elementen führt.
• auto-fill und auto-fit zu verwechseln, wenn beide sich bei minmax() gleich verhalten.
• Keine benannten Grid-Areas zu verwenden, was zu schwer wartbaren numerischen Platzierungen führt.
• Layouts durch zu viele explizite Platzierungen unnötig zu verkomplizieren, obwohl Auto-Placement gut funktioniert.
• Davon auszugehen, dass Grid nur für Seitenlayouts gedacht ist – es funktioniert ebenso gut für Komponenten.

Lohnt es sich, CSS Grid im Jahr 2026 noch zu lernen?

Absolut. CSS Grid wird mittlerweile universell unterstützt und ist zum Standard-Tool für Web-Layouts geworden. Jedes große Framework — React, Vue, Svelte, Astro — rendert HTML, das mit CSS gestylt wird. Wer Grid versteht, kann jedes beliebige Layout erstellen, ohne gegen die eigenen Tools ankämpfen zu müssen. Die Zeiten von Float-Hacks und Clearfixes sind vorbei; Entwickler, die Grid beherrschen, schreiben sauberere, wartungsfreundlichere und responsivere Stylesheets. Egal, ob Sie eine einfache Landingpage oder ein komplexes Dashboard bauen: Grid bietet eine Präzision und Flexibilität, mit der es keine andere CSS-Layout-Methode mithalten kann.

So lernst du CSS Grid

Ein praktischer Weg:

1. Lerne display: grid, grid-template-columns und grid-template-rows.
2. Verstehe die fr-Einheit und wie sie den Platz verteilt.
3. Übe auto-fit + minmax() für responsive Grids.
4. Erstelle ein Holy Grail Layout mit grid-template-areas.
5. Lerne die Platzierung von Elementen mit grid-column und grid-row.
6. Erkunde die Alignment-Properties: justify-items, align-items, justify-content, align-content.
7. Baue echte Projekte – ein Dashboard, eine Fotogalerie, eine Pricing-Seite –, bis sich Grid natürlich anfühlt.

Kombiniere Grid anschließend mit Flexbox und responsive Techniken, um vollständige, produktionsreife Layouts zu erstellen. Unser interaktives CSS-Tutorial führt dich mit praktischen Übungen durch jeden einzelnen Schritt.