h1 - Artikel - Titel
Magische Umstrukturierung von Inhalten mit CSS-Grid-Stacks
In diesem Beispiel wird gezeigt, wie Inhalte in einer Ansicht neu positioniert werden können, indem mehrere Raster übereinander gestapelt werden. Das Ziel des Beispiels ist es, eine logische Markup-Struktur beizubehalten und gleichzeitig zu ermöglichen, dass der Inhalt aufgeteilt und im Raster positioniert werden kann. Ein typisches Beispiel: Aus Sicht der HTML-Semantik sollte der Hauptbereich vor dem Seitenleistenbereich stehen, und beide sollten ohne zusätzliche Wrapper auf derselben Ebene liegen.
Diese Demo zeigt, wie durch das Stapeln von zwei Rastern die Elemente der Seitenleiste so erscheinen, als ob sie auf demselben Raster wie der Hauptinhalt platziert wären, während sie in Wirklichkeit in einem separaten Raster platziert sind, das innerhalb des ursprünglichen Rasters liegt und dieses überlagert.