Florence Maurice

Webthemen

subgrid – das Wichtigste zum neuen Spieler bei CSS-Grid

Geschrieben am: , aktualisiert:

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 März 2022 funktioniert der Wert subgrid nur in Firefox, außerdem soll es in Safari kommen.

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

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

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:

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

subgrid - die Preisangaben bei nebeneinanderstehenden Produkten sind gleich hoch

Das subgrid-Beispiel zum Rumspielen bei CodePen (bitte beachten: subgrid funktioniert im März 2022 nur in Firefox, außerdem kommt es bald in Safari)