CSS Grid Subgrid — verschachtelte Layouts ausrichten

1. Das Ausrichtungsproblem in verschachtelten Layouts

Wer mit CSS Grid Subgrid noch nicht gearbeitet hat, kennt das Problem trotzdem: Eine Reihe von Produktkarten soll so ausgerichtet sein, dass Titel, Beschreibung, Preis und Button auf einer Linie liegen — obwohl jede Karte unterschiedlich langen Inhalt hat. Die klassische Lösung war entweder JavaScript zur Laufzeit, position: absolute mit bekannter Höhe oder min-height-Hacks, die spröde auf Inhaltsänderungen reagieren. All diese Ansätze sind Workarounds für ein Problem, das CSS Grid Subgrid deklarativ im Stylesheet löst.

Das Grundproblem: In einem normalen CSS Grid werden die Tracks nur für die direkten Kindelemente des Grid-Containers berechnet. Ein verschachteltes Element — etwa eine Karte innerhalb einer Grid-Zelle — hat keinen Zugriff auf die Tracks des übergeordneten Grids. Es bildet ein eigenes, unabhängiges Layout-System. CSS Grid Subgrid durchbricht diese Isolation. Ein Grid-Item kann seine eigenen Tracks an die Tracks des Eltern-Grids binden und so exakt an denselben Linien ausgerichtet werden.

Die Spezifikation für CSS Grid Subgrid war lange Zeit in Bearbeitung. Firefox implementierte es als erster Browser in Version 71 (2019), Chrome und Edge folgten erst 2023 mit Version 117. Heute gilt die Browser-Unterstützung als ausreichend für Produktionseinsatz, sofern man den Baseline-Status 2023 als Mindestanforderung akzeptiert. Die Möglichkeiten, die CSS Grid Subgrid bietet, rechtfertigen den Einsatz in allen modernen Projekten.

2. Subgrid — Grundkonzept und Syntax

Die Syntax für CSS Grid Subgrid ist minimal: Ein Grid-Item, das selbst ein Grid-Container sein soll, erhält display: grid zusammen mit grid-template-columns: subgrid oder grid-template-rows: subgrid. Durch dieses subgrid-Schlüsselwort erbt das Element die Track-Definition des nächsten Vorfahren, der ein Grid-Container ist. Die Kindelemente des Subgrid-Elements werden nun an diesen geerbten Tracks ausgerichtet, nicht an eigenen Tracks.

Wichtig ist die Unterscheidung: subgrid ersetzt die eigene Track-Definition für die jeweilige Achse. Für Spalten kann man subgrid setzen und gleichzeitig für Reihen eigene Tracks definieren — und umgekehrt. Das Element muss dabei die Spalten des Eltern-Grids überspannen, an die es sich binden soll. Ein Subgrid-Element, das nur eine einzige Eltern-Spalte belegt, kann nur diese eine Spalte erben — das macht bei einzelnen Tracks wenig Sinn. Die typische Verwendung von CSS Grid Subgrid setzt deshalb einen bewusst weiten grid-column: span N voraus.

/* Parent grid — defines the track structure for all card content */
.card-grid {
  display: grid;
  /* 4 columns: stretch across the full container */
  grid-template-columns: repeat(4, 1fr);
  /* 4 named row tracks for card sections */
  grid-template-rows: auto 1fr auto auto;
  gap: 1.5rem;
}

/* Each card spans all 4 column tracks via subgrid */
.card {
  display: grid;
  grid-column: span 1; /* occupies one column in the parent */
  /* Inherit parent row tracks — this is the key subgrid line */
  grid-template-rows: subgrid;
  /* Span all 4 row tracks to participate in alignment */
  grid-row: span 4;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Card sections now align to parent row tracks */
.card__image   { grid-row: 1; }
.card__body    { grid-row: 2; align-self: start; }
.card__price   { grid-row: 3; }
.card__actions { grid-row: 4; }

Die Stärke dieses CSS Grid Subgrid-Musters liegt in der Trennung von Verantwortlichkeiten: Der Eltern-Container definiert das Track-System, die Kind-Komponenten nutzen es. Das Karussell-Layout ändert sich zentral, alle Karten folgen automatisch. Diese Architektur entspricht dem Prinzip von Design-Tokens: Änderungen an einem Ort propagieren sich durch die gesamte Komponentenstruktur.

3. grid-template-rows und grid-template-columns mit subgrid

Das Zusammenspiel von grid-template-rows und grid-template-columns mit CSS Grid Subgrid folgt symmetrischen Regeln, wird aber in der Praxis asymmetrisch eingesetzt. Reihen-Subgrid ist häufiger, weil die Row-Ausrichtung das klassische Ausrichtungsproblem löst: gleiche Höhen für Sektionen mit unterschiedlich viel Inhalt. Spalten-Subgrid wird für formularähnliche Strukturen verwendet, bei denen Labels und Eingabefelder exakt auf denselben Spaltenlinien ausgerichtet sein sollen.

Named Grid Lines funktionieren durch CSS Grid Subgrid hindurch. Wenn der Eltern-Container seine Rows mit Namen versieht — [card-start] auto [card-title] 1fr [card-price] auto [card-end] — können die Subgrid-Kinder direkt mit diesen Namen platziert werden: grid-row: card-title / card-price. Das macht den Code lesbar und stabil gegenüber Strukturänderungen im Track-System. Wer die Anzahl der Tracks ändert, muss nur die benannten Lines anpassen, nicht alle Kindplatzierungen.

/* Named lines propagate into subgrid children */
.form-grid {
  display: grid;
  /* Two-column layout: labels left, inputs right */
  grid-template-columns: [label-start] max-content [label-end input-start] 1fr [input-end];
  gap: 0.75rem 1.5rem;
}

/* Each field-group spans both columns via subgrid */
.field-group {
  display: grid;
  grid-column: 1 / -1;           /* span all columns */
  grid-template-columns: subgrid; /* inherit parent column tracks */
}

/* Children use inherited named lines for precise placement */
.field-group label {
  grid-column: label-start / label-end;
  align-self: center;
  font-weight: 600;
}

.field-group input,
.field-group select {
  grid-column: input-start / input-end;
}

/* Responsive: collapse to single column on small screens */
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .field-group {
    grid-template-columns: subgrid; /* still inherits — now 1fr only */
  }
}

4. Karten-Layout: Cross-Component Alignment in der Praxis

Das klassische Anwendungsbeispiel für CSS Grid Subgrid ist das Karten-Layout mit heterogenem Inhalt. Eine Produktliste enthält Karten mit unterschiedlich langen Titeln, variierenden Beschreibungen und optionalen Badges. Ohne CSS Grid Subgrid müssen alle variablen Bereiche durch CSS-Tricks auf eine gemeinsame Höhe gezwungen werden. Mit CSS Grid Subgrid übernimmt der Browser die Berechnung: Die Zeile, die den Titel enthält, wird so hoch wie der längste Titel aller Karten in der Reihe.

Cross-Component Alignment beschreibt genau dieses Verhalten: Elemente in verschiedenen Komponenten richten sich aneinander aus, obwohl sie im DOM eigenständige Bäume sind. Das ist das Kernversprechen von CSS Grid Subgrid. Es überbrückt die DOM-Kapselung auf Layout-Ebene. Die einzelne Karte muss nichts über ihre Nachbarn wissen — das gemeinsame Track-System des Eltern-Grids sorgt für die Ausrichtung. Diese Architektur skaliert: Zehn Karten in einer Reihe funktionieren genauso wie drei.

Ein häufig übersehener Vorteil: CSS Grid Subgrid funktioniert auch über mehrere Reihen hinweg. Ein Element, das zwei Reihen des Eltern-Grids überspannt, kann gleichzeitig die Subgrid-Ausrichtung für seine Kinder nutzen. Das erlaubt komplexe editorial-artige Layouts, bei denen Feature-Karten größer sind und mehr Inhalt tragen, während kleinere Karten daneben exakt an denselben horizontalen Linien ausgerichtet bleiben.

5. Formulare und Label-Input-Ausrichtung

Formulare sind der zweite große Anwendungsbereich für CSS Grid Subgrid. Das klassische Problem: Ein Formular mit verschachtelten Fieldsets soll Labels und Eingabefelder über alle Fieldsets hinweg auf gemeinsamen Spaltenlinien ausrichten. Bisher erforderte das entweder eine flache HTML-Struktur ohne Fieldsets oder JavaScript-basierte Breitenmessungen. Mit CSS Grid Subgrid kann jedes Fieldset seine Kinder an den Spalten-Tracks des umgebenden Formular-Grids ausrichten.

Die technische Umsetzung: Das Formular-Grid definiert zwei Spalten — eine für Labels, eine für Inputs. Jedes Fieldset erhält display: grid; grid-column: 1 / -1; grid-template-columns: subgrid. Die Labels und Inputs innerhalb des Fieldsets werden damit automatisch an denselben Spaltenlinien ausgerichtet wie alle anderen Felder im Formular. Ändert man die Label-Breite im Formular-Grid, aktualisieren sich alle Fieldsets sofort — ohne irgendwelche JavaScript-Berechnungen.

6. Mehrfach verschachtelte Subgrids

Die CSS Grid Subgrid-Spezifikation erlaubt verschachtelte Subgrids: Ein Subgrid-Kind kann selbst wieder ein Subgrid sein und die Tracks an das nächste Eltern-Grid weiterpropagieren. Das klingt komplex, ist aber in bestimmten Layout-Szenarien das einzig elegante Mittel. Beispiel: Ein Seiten-Layout mit einem Haupt-Grid, das Spalten definiert. Eine Sidebar-Komponente ist ein Subgrid davon. Innerhalb der Sidebar gibt es Widgets, die ihrerseits Subgrid-Kinder der Sidebar sind — und damit indirekt an den Tracks des Seiten-Layouts ausgerichtet werden.

Die Browser-Implementierungen behandeln verschachtelte Subgrids korrekt: Das Kind-Subgrid erbt die Tracks des direkten Eltern-Grids, nicht des übergeordneten Eltern-Grids. Wer tiefer vererben möchte, muss jeden Zwischenknoten explizit als Subgrid auszeichnen. Das ist gewollt: Es verhindert unkontrollierte Layout-Kopplung über viele Ebenen hinweg und macht das Track-System für jeden Zwischenknoten explizit nachvollziehbar.

/* Three-level nested subgrid: page → section → card */
.page-layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* sidebar | main | aside */
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  min-height: 100vh;
}

/* Section spans main area — participates in column subgrid */
.main-section {
  display: grid;
  grid-column: 2;   /* center column */
  grid-row: 1 / -1; /* full height */
  grid-template-rows: subgrid; /* inherit page row tracks */
}

/* Card grid inside main section */
.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: [img] auto [title] 1fr [meta] auto [action] auto;
  gap: 1rem;
}

/* Individual card: subgrid on rows for cross-component alignment */
.card-item {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid; /* inherit card-row row tracks */
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-item img   { grid-row: img; }
.card-item h3    { grid-row: title; align-self: start; }
.card-item .meta { grid-row: meta; }
.card-item .cta  { grid-row: action; align-self: end; }

7. Gap-Vererbung und Named Lines

Eines der subtileren Verhaltensmerkmale von CSS Grid Subgrid ist die Gap-Behandlung. Wenn ein Subgrid-Element die Tracks des Eltern-Grids erbt, erbt es auch die Gap-Werte — es sei denn, das Subgrid-Element definiert explizit eigene Gap-Werte. Das ist wichtig für das visuelle Erscheinungsbild: In einem Karten-Layout sollen die internen Abstände der Karte oft kleiner sein als die Abstände zwischen den Karten. Man setzt den Gap im Subgrid-Element explizit auf einen kleineren Wert oder auf 0 und definiert Innenabstände über Padding.

Named Grid Lines sind ein weiteres mächtiges Werkzeug in Kombination mit CSS Grid Subgrid. Liniennamen, die im Eltern-Grid definiert wurden, stehen in allen Subgrid-Kindelementen zur Verfügung. Das ermöglicht semantisch lesbare Platzierungen: grid-row: content-start / content-end statt grid-row: 2 / 4. Wenn man die Track-Struktur des Eltern-Grids ändert, muss man nur die benannten Linien anpassen — alle Platzierungen, die auf diesen Namen basieren, bleiben automatisch korrekt.

8. Häufige Fehler beim Einsatz von Subgrid

Der häufigste Fehler bei CSS Grid Subgrid: Das Subgrid-Element überspannt nicht genug Tracks des Eltern-Grids. Wenn ein Element nur eine einzige Eltern-Spalte belegt und grid-template-columns: subgrid setzt, hat es nur eine vererbte Spalte. Seine Kinder können nicht über mehrere Spalten ausgerichtet werden. Die Lösung: Das Subgrid-Element muss bewusst mehrere Eltern-Tracks überspannen — mit grid-column: 1 / -1 oder grid-column: span 4.

Ein zweiter häufiger Fehler: CSS Grid Subgrid erfordert, dass das Element selbst ein Grid-Container ist (display: grid oder display: inline-grid). subgrid als Wert für grid-template-rows oder grid-template-columns zu setzen, ohne display: grid zu deklarieren, hat keinen Effekt. Außerdem muss das Element ein direktes Kind eines Grid-Containers sein — es erbt die Tracks seines direkten Eltern-Grid-Containers, nicht eines entfernten Vorfahren.

9. Subgrid im direkten Vergleich

Der Vergleich zwischen CSS Grid Subgrid und alternativen Ausrichtungsstrategien zeigt, warum Subgrid die sauberste Lösung für das verschachtelte Ausrichtungsproblem ist. Alle Alternativen haben Einschränkungen, die Subgrid nicht hat.

Der einzig echte Nachteil von CSS Grid Subgrid ist der Browser-Support-Stand: Wer Internet Explorer oder sehr alte Browser unterstützen muss, kann Subgrid nicht einsetzen. Für alle anderen ist die Frage nicht ob, sondern wann man auf CSS Grid Subgrid umstellt. Progressive Enhancement ist möglich: Ohne Subgrid-Support zeigen Karten ohne perfekte Ausrichtung, mit Support die optimale Version.

10. Zusammenfassung

CSS Grid Subgrid löst das seit Jahren offene Problem der Cross-Component Alignment in verschachtelten Layouts. Mit grid-template-rows: subgrid oder grid-template-columns: subgrid erben Grid-Items die Track-Struktur ihres Eltern-Grids und ermöglichen es, ihre eigenen Kinder exakt an diesen Tracks auszurichten. Das Ergebnis: Karten-Layouts mit perfekt ausgerichteten Sektionen, Formulare mit konsistenten Label-Input-Spalten, editorial Layouts mit Component-übergreifender Ausrichtung — alles ohne JavaScript, ohne Workarounds, rein deklarativ im CSS.

Der Browser-Support hat 2023 einen kritischen Stand erreicht: Chrome, Firefox, Safari und Edge unterstützen CSS Grid Subgrid. Named Grid Lines, Gap-Vererbung und mehrfach verschachtelte Subgrids erweitern die Möglichkeiten weiter. Wer heute neue CSS-Layouts plant, sollte CSS Grid Subgrid als erste Wahl für alle verschachtelten Ausrichtungsprobleme in Betracht ziehen und die bisherigen Workarounds schrittweise ablösen.

11. FAQ: CSS Grid Subgrid