display: contents – Grid mit Zeilenraster
Nur die direkten Kind-Elemente eines Grid-Containers können im Raster des Grids platziert werden. So liegen zwar aufeinander folgende Elemente im Grid, aber innerhalb der einzelnen Grid-Elemente ist die Verteilung des Platzangebots »wie's grad passt«.
<div class="gridblock"> <div class="gridgroup"> <img src="fraisier.webp" width="420" height="176" > <h4>1 Erdbeertörtchen …</h4> </div> <div class="gridgroup"> <img src="palmier.webp" width="420" height="327" > <h4>2 Palmier –</h4> </div> <div class="gridgroup"> <img src="sable.webp" width="420" height="280"> <h4>3 Sablé …</h4> </div> </div>
Geben wir den Grid-Elementen ein display: contents, verschwinden sie sozusagen – jedenfalls aus der Sicht des CSS. Die Grid-Elemente unter dem Grid-Container werden nicht mehr beachtet, stattdessen werden ihre Elemente zu Grid-Elementen. obwohl sie weiterhin als Gruppe logisch und semantisch im HTML-Markup stehen.

1 Erdbeertörtchen mit Sahne

2 Palmier oder Schweineöhrchen, wie wir sie hier nennen

3 Sablé, ein geschichtetes Sandgebäck mit Himbeermarmelade-Klecks
display:contents Aus / An
Mit gridgroup { display: contents } lösen sich die CSS-Eigenschaften der Grid-Elemente sozusagen in Luft auf – Hintergrundfarbe und border sind weg. Der Grid-Container hat weiterhin drei Spalten, aber die Spalten werden jetzt horizontal in der Reihenfolge besetzt, in der die Elemente im HTML stehen. Der Grid-Container braucht nun noch zwei zusätzliche Eigenschaften, um die Elemente in Spalten und Zeilen zu setzen:
.gridblock { display: grid; gap: 14px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; } .gridgroup { display: contents; }
Die Kinder der entmachteten gridgroup sind quasi eine Stufe im DOM nach oben gerutscht.