Bringe deine Layouts auf Linie mit CSS Subgrid

CSS Grid Layout ist ein zweidimensionales, rasterbasiertes Layout-System für Websites. Es erleichtert die Anordnung von Inhalten in Zeilen und Spalten sowie die Erstellung responsiver Layouts.

Wer mit Grid-Layouts vertraut ist, kennt wahrscheinlich das folgende Problem: Ein Grid-Container kann in einem anderen Grid platziert werden, um ein verschachteltes Grid-Layout zu erzeugen. Leider passt sich der Inhalt des untergeordneten Grids nicht automatisch an das übergeordnete Grid an. Aber keine Sorge! Wir können dieses Problem mit dem subgrid Feature lösen!

Ein Schachbrett mit einem Raster aus Zeilen und Spalten. Foto: © RODNAE Productions / pexels.com

Die Subgrid-Funktion macht das Grid-Layout noch mächtiger und ermöglicht es, perfekt ausgerichtete Layouts zu erstellen. Ich habe eine Demo für einen typischen Anwendungsfall vorbereitet. Schauen wir uns an, wie das Ganze funktioniert.

Die Grundlagen des Grid-Layouts

Das Grid-Layout-System ist in der Spezifikation des CSS Grid Layout Moduls definiert:

A two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

Ihr könnt ein HTML-Element mit der CSS-Eigenschaft display: grid in einen Grid-Container verwandeln. Mit den Eigenschaften grid-template-rows und grid-template-columns könnt ihr die Zeilen und Spalten definieren.

Es gibt zahlreiche Möglichkeiten, ein Raster zu definieren und es mit Inhalten zu füllen. Alle möglichen Einstellungen und Szenarien aufzulisten, würde den Rahmen dieses Artikels sprengen. Wenn ihr mehr erfahren möchtet, kann ich die Tutorials „A Complete Guide to CSS Grid“ und „Learn CSS Grid“ empfehlen.

Was ist ein Subgrid und wozu ist es gut?

Das Subgrid-Feature wurde im CSS Grid Layout Modul Level 2 hinzugefügt. Die Spezifikation besagt:

A nested grid can defer the definition of its rows and/or columns to its parent grid container, making it a subgrid. In this case, the grid items of the subgrid participate in sizing the parent grid, allowing the contents of both grids to align.

Um ein Subgrid zu definieren, setzt ihr einfach den Wert subgrid für die Eigenschaft grid-template-rows oder grid-template-columns. Das war's! Das verschachtelte Grid verwendet nun die vom übergeordneten Grid definierten Spalten und/oder Zeilen und richtet seinen Inhalt entsprechend aus.

Demo: Punk API Bier-Liste

Ich habe eine React-Demo erstellt, die eine Liste von Bieren in einem Raster mit drei gleichgroßen Spalten anzeigt. Jede Zelle enthält Informationen über ein bestimmtes Bier. Seht euch die Live-Version hier an (am besten auf einem Desktop-Bildschirm).

Der übergeordnete Grid-Container

Die Demo verwendet eine ungeordnete Liste als übergeordneten Grid-Container. Hier ist der JSX-Code:

<ul className={styles.beerGrid}> {items.map(item => ( <li key={item.id}> <BeerItemDetails item={item} /> </li> ))} </ul>

In meinem CSS-Code verwende ich die Funktionen repeat und minmax, um ein Raster mit drei Spalten und einer variablen Anzahl von Zeilen zu erstellen. Jede Spalte ist gleich groß und hat eine Mindestbreite von 15rem.

ul.beerGrid { display: grid; gap: 2.5rem; grid-template-columns: repeat(3, minmax(15rem, 1fr)); grid-template-rows: auto; list-style: none; }

Die Bier-Infokarten zu Subgrids machen

Jedes Listenelement wird mit der React-Komponente BeerItemDetails gerendert. Diese Komponente besteht aus einem Kopfbereich (hgroup Element) und einem Detailbereich (div Element):

<hgroup className={styles.heading}> <h2>{item.name}</h2> <p>{item.tagline}</p> </hgroup> <div className={styles.flexRow}> <!-- details --> </div>

In meinem CSS-Code definiere ich die Listenelemente als Grid-Container mit zwei Zeilen (grid-row: span 2). Die Deklaration grid-template-rows: subgrid weist den Browser an, die Kopfzeile und den Detailbereich jeder Bier-Infokarte aufeinander auszurichten, wenn diese in derselben Zeile platziert werden.

ul.beerGrid li { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 0; }

Einfache Entwicklung mit CSS Grid Inspector

Ich habe den CSS Grid Inspector (Firefox DevTools) intensiv genutzt. Dieses geniale Werkzeug hebt die Zeilen und Spalten eures Rasters hervor und macht es einfacher zu verstehen, wie das übergeordnete Grid und seine Subgrids zusammenpassen.

Die Chrome DevTools enthalten ein ähnliches Tool. Aber als leidenschaftlicher Firefox-Nutzer musste ich natürlich das Firefox-Tool als erstes nennen. 😉

Browser-Unterstützung und progressive Verbesserung

Zum Zeitpunkt der Veröffentlichung dieses Beitrags unterstützen nur Safari und Firefox das Subgrid-Feature. Aber keine Sorge! Ihr müsst nicht warten, bis Chrome und Edge aufholen.

Wendet das Prinzip der progressiven Verbesserung an, um ein Basis-Layout bereitzustellen und gleichzeitig die Vorteile des Subgrid-Features in unterstützenden Browsern zu nutzen. Dazu verwenden wir @supports, um die Browserunterstützung zu prüfen, bevor wir den Wert subgrid setzen:

@supports (grid-template-rows: subgrid) { ul.beerGrid li { display: grid; grid-template-rows: subgrid; } }

Nützliche Links

Erstellt am