Subgrid

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Das CSS Grid Layout-Modul enthält einen subgrid-Wert für grid-template-columns und grid-template-rows. Dieser Leitfaden erklärt, was subgrid bewirkt, und gibt Anwendungsfälle und Designmuster an, die durch dieses Feature gelöst werden.

Einführung in Subgrid

Wenn Sie display: grid auf einen Grid-Container anwenden, werden nur die direkten Kinder zu Grid-Elementen, die dann auf dem erstellten Raster platziert werden können. Die Kinder dieser Elemente werden im normalen Fluss angezeigt.

Sie können "verschachtelte" Grids erstellen, indem Sie ein Grid-Element zum Grid-Container machen. Diese Grids sind jedoch unabhängig vom übergeordneten Grid und voneinander, was bedeutet, dass sie ihre Spurgrößen nicht vom übergeordneten Grid übernehmen. Dies erschwert es, verschachtelte Grid-Elemente mit dem Hauptgrid auszurichten.

Wenn Sie den Wert subgrid auf grid-template-columns, grid-template-rows oder beides anwenden, verwendet das verschachtelte Grid anstelle einer neuen Spurauflistung die Spuren, die auf dem übergeordneten Grid definiert sind.

Zum Beispiel, wenn Sie grid-template-columns: subgrid verwenden und das verschachtelte Grid drei Spuren des übergeordneten Grids überspannt, hat das verschachtelte Grid drei Spuren, die dieselbe Größe wie das übergeordnete Grid haben. Während Abstände geerbt werden, können sie mit einem anderen gap-Wert überschrieben werden. Liniennamen können vom übergeordneten Grid in das Subgrid weitergegeben werden, und das Subgrid kann auch seine eigenen Liniennamen deklarieren.

Subgrid für Spalten

Im folgenden Beispiel hat das CSS-Grid-Layout neun 1fr-Spuren für Spalten und vier Zeilen, die mindestens 100px hoch sind.

Das .item wird zwischen den Spaltenlinien 2 bis 7 und den Zeilen 2 bis 4 platziert. Dieses Grid-Element wird ebenfalls als Grid mit display: grid definiert und dann als Subgrid durch Angabe von Spuren für Spalten, die ein Subgrid sind (grid-template-columns: subgrid), festgelegt, während die Zeilen normal definiert werden. Das Subgrid hat fünf Spuren, da es fünf Spuren des übergeordneten Grids überspannt.

Da das .item ein Subgrid ist, kann die .subitem, obwohl sie kein direktes Kind des äußeren .grid ist, auf diesem äußeren Grid platziert werden und ihre Spalten sind mit den Spalten des äußeren Grids ausgerichtet. Die Zeilen sind kein Subgrid und verhalten sich daher wie ein normales verschachteltes Grid. Der Grid-Bereich des Elternteils erweitert sich, um für dieses verschachtelte Grid ausreichend Platz zu bieten.

html
<div class="grid">
  <div class="item">
    <div class="subitem"></div>
  </div>
</div>
css
.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3, 80px);
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

Beachten Sie, dass die Nummerierung der Linien im Subgrid neu beginnt — die Spaltenlinie 1 im Subgrid ist die erste Linie des Subgrids. Das Subgrid-Element erbt nicht die Liniennummern des übergeordneten Grids. Dies bedeutet, dass Sie ein Layout für eine Komponente sicher gestalten können, unabhängig davon, wo sie sich im Hauptgrid befindet, da die Zeilennummern der Komponente immer dieselben sind.

Subgrid für Zeilen

Dieses Beispiel verwendet dasselbe HTML wie oben, jedoch wird hier der Wert subgrid für grid-template-rows verwendet, während die Spuren für Spalten explizit definiert werden. In diesem Fall verhalten sich die Spuren für Spalten wie bei einem regulären verschachtelten Grid, aber die Zeilen sind mit den beiden Spuren verbunden, die .item überspannt.

css
.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: subgrid;
}

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

Ein Subgrid in beiden Dimensionen

In diesem Beispiel werden sowohl Zeilen als auch Spalten als Subgrid definiert, wodurch das Subgrid mit den Spuren des übergeordneten Grids in beiden Dimensionen verbunden wird.

css
.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

Kein implizites Grid in einer Subgrid-Dimension

Wenn Sie Elemente automatisch platzieren möchten, ohne zu wissen, wie viele Elemente vorhanden sein werden, sollten Sie bei der Erstellung eines Subgrids vorsichtig sein, da es die Erstellung zusätzlicher Zeilen zur Aufnahme dieser Elemente verhindert.

Betrachten Sie das folgende Beispiel – es verwendet dasselbe übergeordnete und untergeordnete Grid wie im obigen Beispiel. Es gibt zwölf Elemente im Subgrid, die versuchen, sich in zehn Rasterzellen automatisch zu platzieren. Da das Subgrid in beiden Dimensionen verwendet wird, gibt es keinen Platz für die zusätzlichen zwei Elemente, sodass sie in die letzte Spur des Grids gehen. Dies ist das Verhalten, das in der Spezifikation definiert ist.

html
<div class="grid">
  <div class="item">
    <div class="subitem">1</div>
    <div class="subitem">2</div>
    <div class="subitem">3</div>
    <div class="subitem">4</div>
    <div class="subitem">5</div>
    <div class="subitem">6</div>
    <div class="subitem">7</div>
    <div class="subitem">8</div>
    <div class="subitem">9</div>
    <div class="subitem">10</div>
    <div class="subitem">11</div>
    <div class="subitem">12</div>
  </div>
</div>
css
.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

Durch das Entfernen des Wertes grid-template-rows wird die reguläre Erstellung impliziter Spuren ermöglicht, wodurch so viele Zeilen wie erforderlich erstellt werden. Diese stimmen jedoch nicht mit den Spuren des übergeordneten Grids überein.

html
<div class="grid">
  <div class="item">
    <div class="subitem">1</div>
    <div class="subitem">2</div>
    <div class="subitem">3</div>
    <div class="subitem">4</div>
    <div class="subitem">5</div>
    <div class="subitem">6</div>
    <div class="subitem">7</div>
    <div class="subitem">8</div>
    <div class="subitem">9</div>
    <div class="subitem">10</div>
    <div class="subitem">11</div>
    <div class="subitem">12</div>
  </div>
</div>
css
.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-auto-rows: minmax(100px, auto);
}

Die Gap-Eigenschaften und Subgrid

Jeder Wert für gap, column-gap oder row-gap, der für das übergeordnete Grid angegeben wird, wird in das Subgrid übernommen, sodass dieselben Abstände zwischen den Spuren wie beim übergeordneten Grid bestehen. Dieses Standardverhalten kann durch das Anwenden von gap-*-Eigenschaften auf den Subgrid-Container überschrieben werden.

In diesem Beispiel weist das übergeordnete Grid einen Abstand von 20px für Zeilen und Spalten auf, während das Subgrid row-gap auf 0 gesetzt hat.

html
<div class="grid">
  <div class="item">
    <div class="subitem"></div>
    <div class="subitem2"></div>
  </div>
</div>
css
.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
  gap: 20px;
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

.subitem2 {
  background-color: rgb(0 0 0 / 0.5);
  grid-column: 2;
  grid-row: 1;
}

Wenn Sie dies in den Entwickler-Tools mit dem Grid-Inspektor untersuchen, wird Ihnen auffallen, dass die Subgrid-Linie in der Mitte der Lücke liegt. Das Festlegen des Abstands auf 0 wirkt ähnlich wie das Anwenden eines negativen Randes auf ein Element und gibt den Abstand der Lücke zurück zum Element.

Das kleinere Element befindet sich in der Lücke, da row-gap im Subgrid auf 0 gesetzt ist, wie in den Firefox Developer Tools Grid-Inspektor gezeigt.

Benannte Grid-Linien

Wenn Sie CSS Grid verwenden, können Sie Linien in Ihrem Grid benennen und dann Elemente basierend auf diesen Namen statt auf der Liniennummer positionieren. Die Liniennamen des übergeordneten Grids werden in das Subgrid weitergegeben, und Sie können Elemente mit diesen Namen platzieren. Im folgenden Beispiel werden die benannten Linien col-start und col-end des übergeordneten Grids verwendet, um die Subitem zu platzieren.

html
<div class="grid">
  <div class="item">
    <div class="subitem"></div>
  </div>
</div>
css
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr [col-start] 1fr 1fr 1fr [col-end] 1fr 1fr 1fr;
  grid-template-rows: repeat(4, minmax(100px, auto));
  gap: 20px;
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.subitem {
  grid-column: col-start / col-end;
  grid-row: 1 / 3;
}

Sie können auch Liniennamen auf dem Subgrid spezifizieren. Dies wird erreicht, indem nach dem Schlüsselwort subgrid eine Liste von Liniennamen in eckigen Klammern hinzugefügt wird. Zum Beispiel, wenn Ihr Subgrid vier Linien hat, könnten Sie alle benennen, indem Sie die Syntax grid-template-columns: subgrid [line1] [line2] [line3] [line4] verwenden.

Die im Subgrid spezifizierten Linien werden zu allen Linien des übergeordneten Grids hinzugefügt, sodass Sie entweder beide oder nur diese verwenden können. In diesem Beispiel wird ein Element mit den Linien des übergeordneten Grids und eines mit den Subgrid-Linien platziert.

html
<div class="grid">
  <div class="item">
    <div class="subitem"></div>
    <div class="subitem2"></div>
  </div>
</div>
css
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr [col-start] 1fr 1fr 1fr [col-end] 1fr 1fr 1fr;
  grid-template-rows: repeat(4, minmax(100px, auto));
  gap: 20px;
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e] [sub-f];
  grid-template-rows: subgrid;
}

.subitem {
  grid-column: col-start / col-end;
  grid-row: 1 / 3;
}

.subitem2 {
  background-color: rgb(0 0 0 / 0.5);
  grid-column: sub-b / sub-d;
  grid-row: 1;
}

Verwendung von Subgrids

Ein Subgrid verhält sich sehr ähnlich wie jedes verschachtelte Grid; der einzige Unterschied besteht darin, dass die Spurgrößen des Subgrids im übergeordneten Grid definiert sind. Wie bei jedem verschachtelten Grid kann jedoch die Größe des Inhalts im Subgrid die Spurgrößen ändern, vorausgesetzt, es wird eine Spurgrößenmethode verwendet, die es dem Inhalt erlaubt, die Größe zu beeinflussen. In einem solchen Fall wachsen automatisierte Zeilen-Spuren, um den Inhalt im Hauptgrid und im Subgrid aufzunehmen.

Da sich der Wert subgrid sehr ähnlich wie ein reguläres verschachteltes Grid verhält, ist es einfach, zwischen beiden zu wechseln. Wenn Sie beispielsweise feststellen, dass Sie ein implizites Grid für Zeilen benötigen, müssten Sie den Wert subgrid in grid-template-rows entfernen und möglicherweise einen Wert für grid-auto-rows angeben, um die impliziten Spurgrößen zu steuern.

Spezifikationen

Specification
CSS Grid Layout Module Level 2
# subgrids

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
subgrid

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch