CSS/Tutorials/Grid/Verschachtelte Raster

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Grid
Wechseln zu: Navigation, Suche

Das Grid Layout ist perfekt für zweidimensionale Raster in flachen HTML-Strukturen wie Bildergalerien.

Mit dem CSS Grid Layout Module Level 2 ist es nun möglich, solch verschachtelte Raster (subgrids) zu erzeugen, die sich an das „Eltern-Raster“ anpassen.[1]

verschachtelte Raster

herkömmliche Vorgehensweise

Ein Element wird mit display:grid zu einem Grid-Container, dessen direkten Kinder sich dann als Grid-Items in ein Raster ordnen. Kinder dieser Grid-Items (Kindeskinder des Grid-Containers) werden aber wieder im normalen Elementfluss platziert.

Bisher konnten Raster verschachtelt werden, indem das Grid-Item mit display:grid zu einem weiteren Grid-Container wurde. Dabei störten aber Abstände wie gap, padding und margin, die dann entsprechend angepasst werden mussten.

In diesem Beispiel besteht der article aus einer Produktvorschau mehrerer Karten, die mit einem figure-Element mit 3 Kind-Elementen realisiert werden:

verschachteltes Grid mit 2 unabhängigen Rastern 
article {
    display: grid;
    grid-template-columns: repeat[4, 1fr);
}

figure {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

verschachteltes Grid mit unterschiedlichen Höhen

Jedes figure-Element wird zu einem eigenen Grid-Container, der den Inhalt auf den jeweils verfügbaren Platz aufteilt. Dabei entstehen aber je nach Textlänge unterschiedlich große Überschiften und figcaptions.

subgrid

Browserunterstützung
caniuse.com

Level 2 der CSS Grid Layout Spezifikation beinhaltet einen subgrid-Wert für grid-template-columns und grid-template-rows, mit dem Sie das Raster auch in weiteren Kindeskind-Elementen fortführen können.[2]

verschachteltes Grid mit subgrid ansehen …
<style>
article {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));	
    grid-template-rows: auto 1fr auto;
    gap: 1em;
}

figure {
    grid-row: auto / span 3; /* soll sich über drei Reihen des Elterngrid erstrecken */
    display: grid;
    grid-template-rows: subgrid;
    gap: 0; /* innerhalb des subgrids sollen keine Abstände sein */
    border: medium solid #c32e04;
    margin: 0;
}

Da sich der Grid-Container des figure-Elements nach dem Eltern-Grid des article-Elements ausrichtet, haben jetzt alle h3-Überscrhiften und auch die figcaption jeweils die gleiche Höhe.

Liniennamen und Subgrid

Die Namen benannter Linien eines Eltern-Rasters werden an das subgrid weitergegeben. Also können wir subgrid-Items entsprechend dieser Liniennamen positionieren: 

.grid {
    display: grid;
    grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g];
    grid-template-rows: auto auto auto;
}

.item {
    grid-column: 2 / 6;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 10em 5em 200px 200px;
}

.subitem {
    grid-column: c / e;
}

Fazit

Subgrids sind nützlich, um gleiche Rasterzellen in verschiedenen Geschwister-Elementen zu erzeugen. Sobald Sie so ein verschachteltes Raster erschaffen haben, können Sie es aber nicht mehr durch die implizierte Erzeugung weiterer Zellen erweitern. Weitere Grid-Items werden im letzten verfügbaren track übereinander dargestellt und verdecken sich so gegenseitig.

Allerdings können Sie nur eine Dimension ihres Subgrids mit subgrid festlegen und damit die andere Dimension so anlegen, dass sich weitere Elemente wie gewohnt einfügen.

Die Browserunterstützung blieb bis heute (Stand März 2023) ungenügend. Eine zeitgemäße Alternative wären wohl die neuen Container Queries


Weblinks

  1. ↑ W3C: CSS Grid Layout Module Level 2
  2. ↑ MDN: Subgrid

Beispiele

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Grid/Verschachtelte_Raster&oldid=88846“