subgrid – das Wichtigste zum neuen Spieler bei CSS-Grid

Geschrieben am: 11.9.2019 , aktualisiert: 5.5.2023

verschachteltes Raster, Zeilen im inneren Raster orientieren sich aneinander

subgrid ist als zusätzlicher Wert bei grid-template-columns oder grid-template-rows möglich. Dieser Wert war ursprünglich in CSS Grid Layout Module Level 1 vorgesehen, wurde dann aber in CSS Grid Layout Module Level 2 verschoben. Es hilft bei der Darstellung von verschachtelten Rastern und ist deswegen bei der Arbeit mit CSS Grid seeehr nützlich.

Vorweg: bitte die aktuelle Browserunterstützung beachten. Im Mai 2023 funktioniert der Wert subgrid nur in Firefox und in Safari; in Chrome ist es aber auch "in development".

subgrid ist nur sinnvoll bei verschachtelten Rastern, d.h. wenn

das Elternelement ein Gridcontainer ist, d.h. das Element selbst ein Griditem ist.
das Element selbst zusätzlich ein Gridcontainer ist, also die Angabe display: grid besitzt.

Üblicherweise sollte außerdem subgrid bei grid-template-columns oder grid-template-rows nur eingesetzt werden, wenn

... das Element sich über die Anzahl an Zellen des Elterngrids erstreckt, die es dann als Gridcontainer verwalten soll.

Ein kleines Beispiel mit folgender HTML-Struktur:

<body> 
  <div class="produkt"> 
    <p class="text">Lorem ipsum</p>
    <div class="preis">25 €</div>
  </div> 
  <div class="produkt"> 
    <p class="text">Lorem ipsum</p> 
    <div class="preis">25 € <br>echt :)</div>
   </div> <!-- weitere Elemente --> 
</body>

body ist der Gridcontainer und sorgt für ein Raster, damit die einzelnen Produkte nebeneinander dargestellt werden:

body { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 1rem; 
}

Im Beispiel werden nur die Spalten definiert. Die Zeilen ergeben sich automatisch aus den Inhalten.

Nun zu den entscheidenden Formatierungen bei den Produkten:

.produkt { 
  grid-row: span 2; 
  display: grid; 
  grid-template-rows: subgrid;
}

Die einzelnen Angaben:

grid-row: span 2: Jedes Produkt soll sich über zwei Zeilen des übergeordneten Grids erstrecken.
Außerdem wird das Produkt selbst zum Gridcontainer: display: grid.
Die Aufteilung der Zeilen soll vom übergeordneten Raster übernommen werden (dort sind sie nicht explizit festgelegt, was auch nicht notwendig ist). Das erreicht man über die neue Angabe grid-template-rows: subgrid.

Das Ergebnis: Die Angabe mit den Preisen ist bei den Produktkärtchen unterschiedlich hoch (meist einzeilig, einmal zweizeilig). Je nach Viewport werden unterschiedlich viele Produktkärtchen nebeneinander dargestellt. Durch subgrid sind diese Preisangaben immer so hoch wie bei den benachbarten Produktkärtchen, da sie dank subgrid in Beziehung stehen.

subgrid - die Preisangaben bei nebeneinanderstehenden Produkten sind gleich hoch

Das subgrid-Beispiel zum Rumspielen bei CodePen (bitte beachten: subgrid funktioniert im Mai 2023 nur in Firefox und in Safari, in Chrome ist es zumindest in der Entwicklung)

Florence Maurice

subgrid – das Wichtigste zum neuen Spieler bei CSS-Grid