CSS Subgrid – verschachtelte Grids

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:

Beispiel-Layout mit drei »Card-Elementen«, jeweils mit farbigem Header und weißem Inhaltsbereich
Beispiel-Layout mit drei »Card-Elementen«, jeweils mit farbigem Header und weißem Inhaltsbereich

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.

Beispiel ansehen

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-subgrid feature across the major browsers from caniuse.com

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →