Zur Startseite

CSS Shorts: Subgrid

In der September-Ausgabe des Joomla Magazines habe ich eine neue CSS-Serie mit kurzen Erklärungen moderner CSS-Eigenschaften und -Funktionen gestartet. Der heutige Artikel handelt von Subgrids.

Grids und Subgrids

Das Grid-Layout ist seit Oktober 2017 browserübergreifend verfügbar. Es ermöglicht, ein zweidimensionales Layout zu erstellen, das Spalten (columns), Zeilen (rows) und Bereiche (areas) definiert.

Wie ich in „Cassiopeia, Joomla’s powerful built-in template: how to modify the header with css grid“ erklärte, verwendet das Standardtemplate Cassiopeia CSS-Grid für das gesamte Layout und auch ein Kategorieblog wird als Raster definiert.

Aber das Rasterlayout hat einige Mängel. Wir werden einen Blog als Beispiel verwenden. Mit diesem CSS definieren wir ein Raster (grid) mit zwei Spalten und drei Zeilen. Jedes Gitterelement (grid-item) erstreckt sich über die drei Zeilen:

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-rows: 1fr 1fr 1fr;
}
.grid-item {
    grid-row: 1 / 4;
}
Zwei Beiträge in einem Grid

Das sieht gut aus, wenn in jedem Element Titel, Introtext und Bilder die gleiche Länge / Größe haben. Aber was passiert, wenn der Introtext eines Artikels länger ist?

Zwei Beiträge in einem Grid, im zweiten ist der Introtext länger

Die Teile innerhalb jedes Gitterelements sind nicht mehr ausgerichtet. Wir können anfangen, Höhen zu definieren und Text zu kürzen, aber das Problem wird damit nur für den Moment gelöst.

Und hier spielt Subgrid (Baseline seit 2023 - siehe Weiterführende Informationen) eine Rolle. In einem Subgrid erben die untergeordneten Elemente die Eigenschaften des übergeordneten Rasters: 

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.grid-item {
    grid-row: 1 / 4;
    display: grid;
    grid-template-rows: subgrid;
}

Nun hat das Gitterelement (grid-item) selbst „display: grid“ und erbt mit „grid-template-rows“ die drei Zeilen, die im übergeordneten Element definiert sind (vererbbar sind Zeilen, Spalten oder beides). Das Ergebnis sieht so aus:

Zwei Beiträgen, eins mit längerem Introtext, in einem Subgrid

Da die Rasterelemente nun über ein Subgrid miteinander verbunden sind, sind die Elemente in jedem Blogartikel wieder ausgerichtet!

Weiterführende Informationen

Dieser Artikel basiert auf einem im Joomla Magazine bereits erschienenen Beitrag CSS Shorts: Subgrid

Mastodon