CSS Grid: Das fehlende Gegenstück zu Flexbox 🧩

CSS Grid ist das fehlende Puzzlestück zu Flexbox. Während Flexbox eindimensionale Layouts meistert, gibt dir Grid die volle Kontrolle über Zeilen UND Spalten gleichzeitig. In diesem Artikel lernst du alles von den Basics bis Subgrid, mit praktischen Beispielen, die du sofort einsetzen kannst.

Du kennst Flexbox? Gut. Dann wird es Zeit für den großen Bruder. CSS Grid ist nicht besser als Flexbox, es ist das Gegenstück. Zusammen sind sie unschlagbar.

Aber fangen wir vorne an.

🤔 Grid vs. Flexbox: 1D vs. 2D

Flexbox arbeitet in einer Richtung. Entweder horizontal oder vertikal. Das ist perfekt für Navigation, Toolbars oder eine Reihe von Buttons.

Grid dagegen arbeitet in zwei Richtungen gleichzeitig. Zeilen und Spalten. Das macht es ideal für komplette Seitenlayouts, Dashboards und alles, wo du Elemente in einem Raster anordnen willst.

Kurz gesagt:

• Flexbox = Elemente in einer Linie anordnen (1D)
• Grid = Elemente in einem Raster anordnen (2D)

🏗️ Grid Basics: Dein erstes Grid

Ein Grid zu erstellen ist überraschend einfach. Du brauchst nur einen Container mit display: grid und eine Definition für Spalten und/oder Zeilen.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

Das war's schon. Drei Spalten, drei Zeilen. Die mittlere Spalte nimmt den restlichen Platz ein. Einfach, oder?

  Header
  Sidebar
  Content
  Aside
  Footer

📐 Die fr-Einheit und minmax()

Die fr-Einheit ist das Herzstück von CSS Grid. Sie steht für "fraction", also einen Bruchteil des verfügbaren Platzes.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Hier bekommt die mittlere Spalte doppelt so viel Platz wie die äußeren. Kein Rechnen mit Prozenten nötig.

Noch mächtiger wird es mit minmax():

.container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr minmax(150px, 1fr);
}

Die äußeren Spalten sind mindestens 200px bzw. 150px breit, wachsen aber mit. Das ist responsives Design ohne eine einzige Media Query.

🗺️ Grid Areas: Layouts visuell definieren

Jetzt wird es richtig cool. Mit grid-template-areas kannst du dein Layout buchstäblich "zeichnen":

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  gap: 1rem;
}

header  { grid-area: header; }
nav     { grid-area: sidebar; }
main    { grid-area: content; }
aside   { grid-area: aside; }
footer  { grid-area: footer; }

Du siehst das Layout direkt im Code. Das ist wie ein Bauplan. Jeder im Team versteht sofort, was passiert.

🔄 auto-fill vs. auto-fit: Responsive ohne Media Queries

Hier kommen zwei Keywords, die dir das Leben massiv erleichtern:

/* auto-fill: Erstellt so viele Spalten wie möglich */
.grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

/* auto-fit: Wie auto-fill, aber leere Spalten kollabieren */
.grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Der Unterschied? Bei auto-fill bleiben leere Spalten als Platzhalter erhalten. Bei auto-fit werden sie zusammengeklappt und die vorhandenen Elemente dehnen sich aus.

Für die meisten Card-Grids willst du auto-fit. Probier's aus!

🎯 gap, place-items und place-content

Abstände und Ausrichtung, das Salz in der Grid-Suppe.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; /* Abstand zwischen allen Zellen */

  /* Elemente innerhalb ihrer Zelle zentrieren */
  place-items: center;

  /* Das gesamte Grid im Container zentrieren */
  place-content: center;
}

place-items ist die Kurzform für align-items + justify-items. place-content ist die Kurzform für align-content + justify-content. Weniger Code, gleicher Effekt.

🏷️ Named Grid Lines

Du kannst deinen Grid-Linien Namen geben. Das macht den Code lesbarer, besonders bei komplexen Layouts.

.container {
  display: grid;
  grid-template-columns:
    [sidebar-start] 250px
    [sidebar-end content-start] 1fr
    [content-end aside-start] 300px
    [aside-end];
  grid-template-rows:
    [header-start] auto
    [header-end main-start] 1fr
    [main-end footer-start] auto
    [footer-end];
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: main-start / main-end;
}

Statt kryptischer Zahlen wie grid-column: 1 / 2 sagst du einfach, wo das Element hin soll. Dein zukünftiges Ich wird dir danken.

🆕 Subgrid: Die neueste Superkraft

Subgrid ist ein Game-Changer. Damit können verschachtelte Grids die Spalten- oder Zeilendefinition des Eltern-Grids übernehmen.

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.child {
  grid-column: span 4;
  display: grid;
  grid-template-columns: subgrid;
  /* Übernimmt die 4 Spalten des Eltern-Grids */
}

Warum ist das wichtig? Stell dir Card-Layouts vor, bei denen Titel, Bild und Button über alle Cards hinweg exakt auf einer Linie sein sollen. Ohne Subgrid war das ein Albtraum. Mit Subgrid ist es trivial.

Subgrid hat mittlerweile breite Browser-Unterstützung, alle modernen Browser können es.

🛠️ Praxisbeispiele

Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "nav header"
    "nav main";
  height: 100vh;
  gap: 0;
}

.dashboard-nav    { grid-area: nav; background: #1a1a2e; }
.dashboard-header { grid-area: header; background: #16213e; }
.dashboard-main   { grid-area: main; padding: 2rem; }

/* Cards im Main-Bereich */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

Card Grid mit gleichmäßigen Höhen

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

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* Bild, Content, Footer */
}

Holy Grail Layout

.holy-grail {
  display: grid;
  grid-template:
    "header header header" auto
    "nav    main   aside"  1fr
    "footer footer footer" auto
    / 200px 1fr    200px;
  min-height: 100vh;
  gap: 1rem;
}

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

Das Holy Grail Layout, jahrelang der heilige Gral des Webdesigns, ist mit Grid ein Fünfzeiler. Kein Float-Hack, kein Clearfix, kein Gebastel.

🧭 Wann Grid, wann Flexbox?

Die goldene Regel: Grid für das Layout, Flexbox für die Komponenten. Natürlich gibt es Graubereiche, aber mit dieser Faustregel liegst du in 90% der Fälle richtig.

💡 Fazit

CSS Grid ist kein Ersatz für Flexbox, es ist die perfekte Ergänzung. Wenn du bisher nur Flexbox benutzt hast, fehlt dir buchstäblich die halbe Layout-Power von CSS.

Fang mit grid-template-areas an. Das ist der intuitivste Einstieg. Dann arbeite dich zu auto-fit + minmax() vor. Und wenn du Subgrid entdeckst, wirst du dich fragen, wie du jemals ohne ausgekommen bist.

Grid + Flexbox zusammen = Layout-Superkräfte. Kein Framework nötig. Nur reines CSS. 🚀