subgrid – das Wichtigste zum neuen Spieler bei CSS-Grid
Geschrieben am: , aktualisiert:
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. Seit September 2023 funktionioniert Subgrid in allen drei Haupt-Browser-Engines: Firefox, Safari und endlich auch Chrome :)
Vorweg: bitte die aktuelle Browserunterstützung beachten. Im September 2023 funktioniert der Wert subgrid
in den aktuellen Versionen von Firefox, Safari und Chrome.
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:
<div class="gridcontainer">
<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 -->
</div>
.gridcontainer
ist der Gridcontainer und sorgt für ein Raster, damit die einzelnen Produkte nebeneinander dargestellt werden:
.gridcontainer {
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.
Das subgrid-Beispiel zum Rumspielen bei CodePen (bitte beachten: subgrid
funktioniert im September 2023 nur in aktuellen Versionen von Chrome, Safari und Firefox).
Übrigens: man kann gut mit @supports
überprüfen, ob Subgrid funktioniert und sonst eine Fallbacklösung bereitstellen.
@supports not (grid-template-rows: subgrid) {
/* subgrid wird nicht unterstützt */
}