Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

Der Browser-Support von CSS »Subgrid«

CSS Subgrid steht aktuell ausschließlich im Firefox seit der Version 71 zur Verfügung. Den aktuellen und detaillierten Browser-Support entnehmt ihr bitte caniuse.com.

Wenn Ihr Chrome oder Safari User seid, findet ihr unter den folgenden Links die jeweiligen Feature-Requests: Chrome, Safari

Geschrieben von Dominique Oppermann

thumb

Dominique arbeitet als Frontend- und WordPress-Entwickler bei kulturbanause®. Zu seinen Aufgaben zählt die technische Umsetzung von zukunftsfähigen Weblösungen sowie die Wartung, Optimierung und Weiterentwicklung bestehender Websites. Neben der technischen Entwicklung konzipiert und plant Dominique erfolgreiche Websites in enger Zusammenarbeit mit unseren Kundinnen und Kunden.

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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: