subgrid – das Wichtigste zum neuen Spieler bei CSS-Grid

subgrid - FF Dev Tools

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 September 2019 funktioniert der Wert subgrid nur im Firefox Nightly (auch wenn caniuse da gerade etwas anderes sagt).

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
subgrid - die Preisangaben bei nebeneinanderstehenden Produkten sind gleich hoch

Das subgrid-Beispiel zum Rumspielen bei CodePen (bitte beachten: subgrid funktioniert im September 2019 nur Firefox Nightly).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.