CSS Grid und Subgrid

CSS subgrad Spalten mit Zeilen gleicher Höhe

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

18-12-15 SITEMAP

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.

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.

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;
}
subgrid: Spalten mit Blöcken gleicher Höhe in allen Zeilen
CSS Grid mit Subgrid: Alle Blöcke innerhalb der Spalten haben dieselbe Höhe

Browser-Support

Also, spruchreif ist CSS subgrid noch nicht. Zurzeit machen nur Firefox und Safari mit, in Chrome sind die Spalten noch ein Rauf-und-Runter.

Mehr zu Grid und Subgrid

Externe Quellen

2022-04-15 SITEMAP BLOG