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