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!
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
- CSS Grid Layout Modul Level 2 (Spezifikation)
- „A Complete Guide to CSS Grid“ (CSS Tricks)
- „Grid by Example“ (Rachel Andrew)
- „Learn CSS Grid“ (Jonathan Suh)
- „Learn CSS Subgrid“ (Ahmad Shadeed)
Erstellt am