CSS Subgrid: verschachtelte Grids ausrichten, ohne ihre Maße neu zu berechnen

Die Elemente einer Karte, eines Formulars oder einer Produktliste auf einem gemeinsamen Raster auszurichten, wenn jeder Block eine unterschiedliche Textmenge enthält, zählt seit Langem zu den wiederkehrenden Problemen im Webdesign. Jahrelang bestand die Antwort aus Mess-JavaScript, festen Höhen oder Flexbox-Tricks. Der Wert subgrid aus CSS Grid Level 2 löst dieses Problem nativ: Ein verschachtelter Container kann nun die Spuren (Zeilen oder Spalten) seines Elternelements erben, statt ein eigenes Raster zu berechnen.

#Das Problem, das subgrid löst

Nehmen wir eine Reihe von Produktkarten: Bild, Titel, Beschreibung, Preis, Button. Definiert jede Karte ihr eigenes internes Raster, garantiert nichts, dass der Titel von Karte 1 und der von Karte 3 dieselbe Spurhöhe einnehmen, weil die Beschreibung von Karte 3 zwei Zeilen länger ist. Das sichtbare Resultat: Kaufen-Buttons, die horizontal nicht mehr fluchten. Historisch gab es zwei Auswege: eine willkürliche feste Höhe setzen (die bricht, sobald sich der Inhalt ändert) oder Höhen nach dem Rendern per JavaScript messen (aufwendig und als Layout-Sprung sichtbar). subgrid macht beides überflüssig: Die Karte definiert keine eigenen Spuren mehr, sondern verwendet die des Elternelements.

#Syntax: erben statt neu definieren

Die Syntax bleibt nah am klassischen CSS Grid, mit einem entscheidenden Unterschied: Statt Spurgrößen aufzulisten, schreibt man subgrid in grid-template-columns oder grid-template-rows. Das Element selbst muss ein Grid-Item sein, das mehrere Spuren des Elternelements überspannt, damit die Vererbung Sinn ergibt.

.karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  gap: 1.5rem;
}

.karte {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
}

.karte__titel        { grid-row: 2; }
.karte__beschreibung { grid-row: 3; }
.karte__preis        { grid-row: 4; }
.karte__aktion        { grid-row: 5; }

Jede .karte überspannt dank grid-row: span 5 die fünf Zeilen des Elternelements und deklariert dann grid-template-rows: subgrid, um genau diese fünf Zeilen als eigenes internes Raster zu übernehmen. Die Kinder jeder Karte werden anschließend anhand von Zeilennummern positioniert, die dem übergeordneten Raster entsprechen, nicht einem lokal neu berechneten.

#Benannte Linien: Code in einem geteilten Raster lesbar halten

Sobald ein Raster mehr als drei oder vier Spuren umfasst, werden rohe Zeilennummern (grid-row: 2, grid-row: 4) schwer lesbar, besonders wenn mehrere Entwickler an denselben Komponenten arbeiten. CSS Grid erlaubt es, Spuren zu benennen, und diese Namen werden automatisch an Subgrid-Kinder weitergegeben, was eine erneute Deklaration auf jeder Verschachtelungsebene überflüssig macht.

.karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:
    [media-start] auto
    [titel-start] auto
    [beschreibung-start] auto
    [preis-start] 1fr
    [aktion-start] auto
    [aktion-ende];
  gap: 1.5rem;
}

.karte {
  display: grid;
  grid-row: media-start / aktion-ende;
  grid-template-rows: subgrid;
}

.karte__titel { grid-row: titel-start; }
.karte__preis { grid-row: preis-start; }

Der Nutzen ist nicht nur kosmetisch: Wird eine Zeile in das Eltern-Raster eingefügt, ersparen die Namen das manuelle Umnummerieren aller Kindkomponenten, die sich auf die folgenden Spuren beziehen.

#Browser-Kompatibilität

Die Funktion gilt inzwischen als Baseline Widely Available – der Referenzwert, um zu beurteilen, dass eine Webfunktion im modernen Browser-Bestand bedenkenlos produktiv eingesetzt werden kann.

#Anwendungsfälle jenseits von Produktkarten

Komponenten vom Typ „Kartenübersicht“ (Preisvergleiche, Team-Profile, Artikelraster) profitieren von derselben Behandlung wie das Ausgangsbeispiel: Das Eltern-Raster gibt den Takt vor, und jedes Kind belegt lediglich die ihm zugewiesenen Zellen, ohne jemals seine eigene Geometrie neu zu berechnen.

#Formulare: ein zweiter konkreter Anwendungsfall

Lange Formulare aus mehreren Feldgruppen (Kontaktdaten, Adresse, Zahlung) leiden unter demselben Problem wie Produktkarten: Ohne geteiltes Raster garantiert nichts, dass Labels, Eingabefelder und Fehlermeldungen von einer Gruppe zur nächsten auf einer gemeinsamen Spalte ausgerichtet sind. Deklariert man ein Spaltenraster auf Formularebene und lässt jedes fieldset diese Spalten über grid-template-columns: subgrid erben, landen das Label „Postleitzahl“ und das Label „Kartennummer“ in derselben Spalte, obwohl das eine zu einer Dreifeld-Gruppe und das andere zu einer Zweifeld-Gruppe gehört. Derselbe Mechanismus richtet Fehlermeldungen auf einer eigenen Spalte aus, unabhängig davon, ob sie bei jedem Feld vorhanden sind, ohne bei einem gültigen Feld einen unschönen leeren Platz zu reservieren.

Mit subgrid hängt die Ausrichtung einer Oberfläche nicht mehr vom längsten Inhalt einer Zeile ab: Das Eltern-Raster gibt den Takt vor, nicht der ausführlichste Text.

#Häufige Fallstricke

Drei Fehler tauchen in Code-Reviews am häufigsten auf. Erstens, zu vergessen, dass das verschachtelte Element mehrere Spuren des Elternelements überspannen muss (grid-row: span n oder grid-column: span n): Ohne das hat subgrid nichts zu erben, und das Element verhält sich wie ein Raster mit nur einer Spur. Zweitens, subgrid auf einer Achse mit expliziten Maßen auf der anderen zu mischen – das ist durchaus gültig, verwirrt aber Leser des Codes, wenn ein nicht-trivialer Fall nicht kommentiert ist. Schließlich das Stapeln mehrerer verschachtelter subgrid-Ebenen: Die Unterstützung existiert, doch jede zusätzliche Ebene erschwert das Debugging in den DevTools und macht es schwieriger nachzuvollziehen, woher eine Spur tatsächlich stammt.

Der Gewinn geht über den visuellen Komfort hinaus und bestätigt sich in der Praxis, besonders für Teams, die bereits Container Queries für adaptive Komponenten einsetzen, da sich beide Funktionen natürlich kombinieren lassen: Die eine steuert die Größe des Containers, die andere die interne Ausrichtung. Kombiniert mit gut strukturierten Design-Tokens für Abstände erlaubt subgrid, Seitenraster vollständig über eine kleine Anzahl von Variablen zu steuern, ohne Spurwerte auf jeder Verschachtelungsebene zu duplizieren.

#Das Wichtigste in Kürze

Subgrid fügt CSS Grid keine spektakuläre neue Fähigkeit hinzu: Es beseitigt eine Einschränkung. Verschachtelte Raster erben nun die Spuren ihres Elternelements, statt sie neu zu berechnen, was eine ganze Klasse von Ausrichtungs-Hacks für Karten, Formulare und Listen mit variabler Inhaltshöhe überflüssig macht. Da die Browser-Unterstützung inzwischen breit ist, hängt die Einführung hauptsächlich davon ab, ob ein Fallback für ein verbleibendes Publikum auf älteren Versionen noch nötig ist.

Weiterführende Links: Die Spezifikation und Referenzbeispiele sind auf der Subgrid-Seite von MDN dokumentiert.