CSS Grid und Subgrid

Mit CSS flex und grid ist ein solider Spaltensatz eingezogen. Aber erst jetzt haben flex und grid endlich eine einfache Lösung für ein tägliches Problem: In zwei, drei oder mehr Spalten bilden Überschriften, Texte und Bilder ein Raster.

CSS subgrad Spalten mit Zeilen gleicher Höhe

Zeilenraster für das Grid

Die Überschriften in allen Spalten, Texte aller Spalten und Bilder aller Spalten sollen dieselbe Höhe haben, damit ein Tabellen-ähnliches Raster entsteht. Nur solang Überschriften und Texte dieselbe Zahl von Zeilen haben, und alle Bilder im selben Seitenverhältnis sind, steht das Raster.

Demo CSS Subgrid, zeigt ein gemaltes Bild von einem kleinen Hefekuchen
Savarin

Savarin

Ein kleiner Hefekuchen

CSS subgrid, zeigt ein Blätterteiggebäck und ist nicht so hoch wie das Bild in der ersten Spalte
Sablé

Blätterteig

in Schichten mit einem Klecks Himbeer- oder Erdbeergelee

Bilder unterschiedlicher Höhe im Grid
Bayerische Creme

Crème 
Bavaroise

Ein Creme-Törtchen (Milch, Eier, Gelatine) mit einem Tarte-Boden und Erdbeeren.

Ist ein Text kürzer oder eine Überschrift länger, gerät das Raster aus der Fassung und verschiebt Texte und Bilder aus dem Raster. Hier haben wir also unterschiedlich große Bilder, die Überschriften sind mal eine, mal zwei Zeilen Land, die Textlänge variiert.

grid-template-rows: subgrid

Jede Spalte des Grids wird selbst zu einem Grid und bekommt die neue CSS-Eigenschaft grid-template-rows: subgrid. Im Beispiel oben muss das WordPress-Gutenberg-CSS überschrieben werden, denn hier sind die Spalten noch als display: flex notiert.

.wp-block-columns {
	display: grid;
	gap: 0 12px;
	grid-template-columns: 1fr 1fr 1fr;
}

.wp-block-column {
	display: grid;
	grid-template-rows: subgrid;
}
Zeilen und Spalten im Grid
CSS Grid mit Subgrid: Alle Blöcke innerhalb der Spalten haben dieselbe Höhe

display: flex und margin-top:auto

Die Unterschriften unter den Bildern – figcaption – ist noch auf die alte Tour auf Position gebracht:

figure {
    display: flex;
    flex-direction: column;
}

figcaption {
    margin-top: auto;
}

Browser-Support

CSS subgrid ist in den modernen Browsern angekommen, zuletzt in Opera.

Mehr zu Grid und Subgrid

Externe Quellen

2024-02-12 SITEMAP BLOG