CSS Grid und Subgrid – 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. Das Raster steht aber nur, wenn Überschriften und Texte dieselbe Zahl von Zeilen und alle Bilder dasselbe Seitenverhältnis haben.

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

Savarin

Ein kleiner Hefekuchen

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;
}

Sub-Grid: 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

Neue CSS-Eigenschaften und Stile – CSS4 wird es nie geben. Neue Eigenschaften tröpfeln nach und nach rein.
CSS supports – Abfrage, ob der Browser eine CSS-Eigenschaft unterstützt
CSS Pseudo-Klasse :has – sag uns Vorfahre, hast du die richtigen Nachkommen?
CSS clamp, min und max – die Klammer, die zusammenhält, und ganze Bildergalerien ganz ohne Breakpoints einrichtet

Externe Quellen

CSS/Tutorials/Grid/Verschachtelte Raster auf selfhtml
CSS Subgrid – verschachtelte Grids auf kulturbanause.de
CSS Grid Level 2: Here Comes Subgrid von Rachel Andrew