CSS Subgrid – verschachtelte Grids
Von: Jonas CSS Grid wirkt normalerweise eine Ebene tief auf die direkten Kind-Elemente. Mit Subgrid können tiefer verschachtelte Ebenen am Raster ausgerichtet werden.
Die CSS-Eigenschaft display:grid; hat Auswirkungen auf die 1. Ebene der Kind-Elemente. Bei der praktischen Arbeit mit Grids kommt man schnell an den Punkt, wo man Rasterlinien in tiefer verschachtelten Ebenen nutzen möchte und dies nur über komplizierte Umwege realisieren kann. Mit dem Ende 2019 eingeführten CSS Befehl »Subgrid« ist dies nun schnell und einfach möglich. In diesem Artikel zeigen wir euch, wie Ihr Subgrid verwendet und wie es um den Browser-Support steht.
Anwendungsbeispiel von CSS Subgrid
Die Funktionsweise von grid-template-rows: subgrid; lässt sich an einem anschaulichen Beispiel am besten verdeutlichen. Das folgende Layout soll aufgebaut werden:
Die Schwierigkeit besteht darin, dass sowohl alle drei Header-Bereiche als auch die drei Inhaltsbereiche gleich hoch sein sollen – auch wenn sie unterschiedlich viel Inhalt enthalten. Wichtig ist, dass der HTML-Code semantisch korrekt und logisch aufgebaut ist.
Für das Beispiel wird folgender HTML-Code benötigt:
<main class="container">
<section class="box">
<header class="box-header"> … </header>
<p class="box-content"> … </p>
</section>
<section class="box">
<header class="box-header"> … </header>
<p class="box-content"> …</p>
</section>
<section class="box">
<header class="box-header"> … </header>
<p class="box-content">… </p>
</section>
</main>Um die drei Boxen (.box) auf eine Höhe zu bringen, können wir Flexbox oder Grid verwenden. In diesem Beispiel verwenden wir Grid. Wir fügen dem äußeren Element (.container) folgende CSS-Eigenschaften hinzu:
.container {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0 1em;
}Nun haben wir alle Boxen auf der gleichen Höhe, jedoch unterscheiden sich die Höhen der drei Header innerhalb der Boxen. Das liegt daran, dass die Header (.box-header) keine direkten Kindelemente des Grid-Containers sind.
An dieser Stelle kommt nun der CSS-Befehl subgrid ins Spiel.
Funktionsweise von »Subgrid«
Standardmäßig ist es bei der Verwendung von CSS Grid so, das die Eigenschaften nur an die direkten Kindelemente weitergegeben werden und nur diese sich positionieren lassen. Bisher musste man, um darin liegende Elemente ebenfalls in einem Grid zu positionieren, die Kindelemente ebenfalls als Grid-Container definieren. Der größte Nachteil hieran ist allerdings, dass sich die Grids der Eltern- und Kindelemente untereinander nicht kennen und so in keinen Abhängigkeiten zueinander stehen.
Mit dem CSS Befehl subgrid ist es nun möglich, Elemente auf der zweiten oder einer tieferen Ebene ebenfalls in dem Elterngrid zu positionieren. Der Vorteil daran ist, dass die Elemente sich untereinander kennen und in Abhängigkeit zueinander stehen.
Lösung mit grid-template-rows: subgrid;
Mit dem gewonnen Kenntnissen kehren wir zu unserem Beispiel zurück und fügen den Boxen nun die folgende CSS-Eigenschaften hinzu:
.box {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
}Nun passen sich sowohl die drei Header-Bereiche als auch die drei Inhaltsbereiche, auf die gleiche Höhe an. Mit dem Befehl grid-row geben wir an, über wie viele Reihen des Elterngrids sich die Box erstrecken soll.
Browser Support
Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.
