Subgrid

Zuletzt aktualisiert am 3. Juli 2026

Verschachtelte Grids sind normalerweise komplett unabhängig voneinander: Das innere Raster weiß nichts vom äußeren. Genau das macht ausgerichtete Karten-Layouts schwierig, denn jede Karte berechnet ihre Zeilenhöhen selbst. Mit dem Wert subgrid für grid-template-columns und grid-template-rows übernimmt ein verschachteltes Grid die Tracks seines Elterngrids. In diesem Artikel lernst du, wie Subgrid funktioniert, wie du damit Karteninhalte über mehrere Karten hinweg ausrichtest und wie sich gap und benannte Linien im Subgrid verhalten.

Syntax
grid-template-columns: subgrid | grid-template-rows: subgrid
Initialwert
none
Vererbt
Nein
Animierbar
Nein

Grundlagen

Ein Grid wirkt nur auf seine direkten Kinder. Sobald du eine Komponente verschachtelst, zum Beispiel eine Karte mit Titel, Text und Button, erzeugt display: grid auf der Karte ein neues, eigenständiges Raster. Die Zeilen der einen Karte haben keinerlei Beziehung zu den Zeilen der Nachbarkarte. Umbricht ein längerer Titel in einer Karte, verschieben sich Text und Button nur dort. Das Ergebnis kennst du bestimmt: Buttons auf unterschiedlichen Höhen, Textblöcke enden versetzt.

Hier setzt Subgrid an. subgrid ist ein Wert für grid-template-columns und grid-template-rows. Statt eigene Tracks zu definieren, übernimmt das verschachtelte Grid die Tracks des Elterngrids in dieser Achse: Größen, Anzahl und Liniennamen kommen dann vom äußeren Raster. Du kannst subgrid pro Achse unabhängig einsetzen, also nur für Spalten, nur für Zeilen oder für beide gleichzeitig.

Drei Dinge müssen dafür zusammenkommen: Das Element ist ein Grid-Item (direktes Kind eines Grid-Containers), es ist selbst ein Grid-Container (display: grid) und es überspannt die Tracks, die es übernehmen soll (z.B. mit grid-column: 1 / -1 oder grid-row: span 3). Die Anzahl der Tracks im Subgrid ergibt sich immer aus der Spannweite: Überspannt das Item drei Spalten des Elterngrids, hat das Subgrid genau drei Spalten.

Falls die Grid-Grundlagen bei dir noch wackeln, schau dir zuerst Grid Container und Grid Platzierung an. Subgrid baut direkt darauf auf.

Syntax & Werte

grid-template-columns / grid-template-rows

Wert Beschreibung Beispiel
subgrid Das verschachtelte Grid übernimmt die Tracks des Elterngrids in dieser Achse, statt eigene zu definieren. grid-template-columns: subgrid
subgrid (Zeilen) Funktioniert genauso für die Zeilen-Achse. Beide Achsen lassen sich unabhängig voneinander subgridden. grid-template-rows: subgrid
subgrid [<name>] ... Ergänzt eigene Liniennamen, die zusätzlich zu den geerbten Namen des Elterngrids gelten. grid-template-columns: subgrid [a] [b] [c]

Eigene Track-Größen kannst du mit subgrid nicht kombinieren. Eine Deklaration wie grid-template-columns: subgrid 200px 1fr ist ungültig, denn die Größen kommen immer vom Elterngrid. Erlaubt sind nach dem Schlüsselwort nur Liniennamen in eckigen Klammern.

Beispiele

grid-template-columns: subgrid

Das Elterngrid hat drei unterschiedlich breite Spalten. Das verschachtelte Element spannt sich über alle drei und übernimmt sie mit subgrid. Seine Kinder (A, B, C) sitzen dadurch exakt unter den Items des Elterngrids, inklusive des geerbten Spaltenabstands.

Spalten vom Elterngrid übernehmen
.parent {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  gap: 8px;
}

.nested {
  grid-column: 1 / -1;             /* spannt alle drei Spalten */
  display: grid;
  grid-template-columns: subgrid;  /* übernimmt 100px 1fr 2fr */
}

Karten ausrichten mit grid-template-rows: subgrid

Der Klassiker: Drei Karten mit Titel, Text und Button. Ohne Subgrid berechnet jede Karte ihre Zeilenhöhen selbst, die Buttons landen auf unterschiedlichen Höhen. Mit Subgrid teilen sich alle Karten dieselben drei Zeilen des Elterngrids. Jede Zeile wird so hoch wie der höchste Inhalt aller Karten, und Titel, Text und Button liegen überall auf derselben Höhe.

Karten-Zeilen ausrichten: vorher und nachher
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 8px;
}

.card {
  grid-row: span 3;             /* Karte belegt drei Zeilen */
  display: grid;
  grid-template-rows: subgrid;  /* Titel, Text und Button
                                   teilen sich diese Zeilen */
}

gap erben und überschreiben

Ein Subgrid erbt gap, row-gap und column-gap automatisch vom Elterngrid, allerdings nur in der Achse, die auf subgrid steht. In der anderen Achse gilt ganz normal der eigene Abstand des Subgrids. Du kannst die geerbten Werte aber auf dem Subgrid überschreiben. Die äußeren Kanten der Tracks bleiben dabei am Elternraster ausgerichtet, nur die Abstände innerhalb des Subgrids ändern sich.

gap-Vererbung im Subgrid
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Erbt automatisch die 16px des Elterngrids */
.sub-inherit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

/* Überschreibt den geerbten Abstand */
.sub-own {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: 4px;
}

Benannte Grid-Linien im Subgrid

Liniennamen des Elterngrids stehen auch im Subgrid zur Verfügung. Zusätzlich kannst du direkt hinter dem Schlüsselwort subgrid eigene Namen vergeben. Beide Namensquellen funktionieren nebeneinander: Das grüne Item nutzt die geerbten Namen inhalt-start und inhalt-end, das lila Item die eigenen Namen a und c.

Geerbte und eigene Liniennamen
.parent {
  display: grid;
  grid-template-columns: 1fr [inhalt-start] 2fr 2fr [inhalt-end] 1fr;
  gap: 8px;
}

.sub {
  grid-column: 1 / -1;
  display: grid;
  /* geerbte Namen bleiben nutzbar,
     a bis e kommen zusätzlich dazu */
  grid-template-columns: subgrid [a] [b] [c] [d] [e];
}

.mit-eltern-namen  { grid-column: inhalt-start / inhalt-end; }
.mit-eigenen-namen { grid-column: a / c; }

Barrierefreiheit

Subgrid hat einen echten Vorteil für die Barrierefreiheit: Du kannst semantisch sinnvolles, verschachteltes HTML behalten und trotzdem alles am selben Raster ausrichten. Ohne Subgrid wurden Layouts dafür oft künstlich abgeflacht, etwa indem Titel, Text und Button aller Karten als direkte Kinder in einen einzigen Container wanderten. Für Screenreader ging damit die Information verloren, welche Teile zu welcher Karte gehören. Mit Subgrid bleibt jede Karte ein eigenes, in sich geschlossenes Element (z.B. ein article), und die Ausrichtung übernimmt das gemeinsame Raster.

Ansonsten gilt dasselbe wie überall in Grid: Die visuelle Platzierung ändert weder die Tab- noch die Lesereihenfolge. Beide folgen der DOM-Reihenfolge (WCAG 1.3.2). Halte die DOM-Struktur logisch und nutze Subgrid nur für die visuelle Ausrichtung.

Häufige Fehler

  • subgrid ohne eigenes display: grid: Der Wert wirkt nur, wenn das Element selbst ein Grid-Container ist. Ohne display: grid bleibt grid-template-columns: subgrid wirkungslos und die Kinder verhalten sich wie normale Block-Elemente.
  • Kein Grid-Item: Subgrid funktioniert nur auf direkten Kindern eines Grid-Containers (oder eines weiteren Subgrids). Steckt zwischen Elterngrid und Subgrid ein zusätzlicher Wrapper ohne Grid, ist die Kette unterbrochen und es gibt keine Tracks zu erben.
  • Nur einen Track überspannt: Die Track-Anzahl des Subgrids ergibt sich aus der Spannweite. Wer grid-template-rows: subgrid setzt, aber das grid-row: span 3 vergisst, bekommt ein Subgrid mit genau einer Zeile, und alle Inhalte quetschen sich hinein.
  • Eigene Größen mit subgrid mischen: grid-template-columns: subgrid 200px 1fr ist ungültig, die komplette Deklaration wird verworfen. Track-Größen kommen immer vom Elterngrid, nach dem Schlüsselwort sind nur Liniennamen erlaubt.
  • Auf implizite Tracks hoffen: In der subgridded Achse erzeugt der Browser keine zusätzlichen Tracks. Passen mehr Items hinein als Tracks vorhanden sind, werden sie in die vorhandenen Tracks gelegt, statt dass neue Zeilen oder Spalten entstehen.

Browser-Kompatibilität

Subgrid wird von allen modernen Browsern vollständig unterstützt, sowohl für Spalten als auch für Zeilen.

ClientUnterstützungHinweise
ChromeKomplett—
FirefoxKomplett—
SafariKomplett—
EdgeKomplett—
OperaKomplett—

Email-Kompatibilität

Subgrid hat in HTML-Emails sehr eingeschränkten Support. Für E-Mail-Layouts solltest du auf Tabellen-basierte Layouts zurückgreifen.

ClientUnterstützungHinweise
Apple MailTeilweiseGrundlegender Grid- und Subgrid-Support vorhanden
GmailKeineGrid wird komplett ignoriert
OutlookKeineKein Grid-Support, Tabellen-Layouts verwenden
ThunderbirdTeilweiseGrundlegender Grid- und Subgrid-Support vorhanden
Yahoo MailKeineKein Grid-Support

Verwandte Eigenschaften

grid-container grid-template-areas grid-platzierung grid-ausrichtung grid-praxis

Bleib auf dem Laufenden

Erhalte neue Inhalte direkt in dein Postfach

Mit der Anmeldung akzeptierst du unsere Datenschutzerklärung. Du kannst dich jederzeit über den Link in den E-Mails wieder abmelden.

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.