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. 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

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

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:

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 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 */
}