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 solange Überschriften und Texte dieselbe Zahl von Zeilen haben, steht das Raster.

Savarin
Ein kleiner Hefekuchen

Blätterteig
in Schichten mit einem Klecks Himbeer- oder Erdbeergelee

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