Viewport:
Screen:
Pixel ratio:

Stacked Grid Effect

h1 - Artikel - Titel

nix - fallback - falls picture und source nicht funktionert
Frankfurt am Main

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.

  • nix - fallback - falls picture und source nicht funktionert
    Essen (Werden)

    Kunst auf dem Dach ist toll.

    Grid ist ein zweidimensionales Layout-Tool. Es eignet sich hervorragend für die Gestaltung von Inhalten in einem Raster und für die Gestaltung von Inhalten in zwei Dimensionen.

  • nix - fallback - falls picture und source nicht funktionert
    Frankfurt am Main · die Zeil

    Kunst auf dem Rasen ist auch super.

    Das Raster ist nicht immer die richtige Option für Layouts. Wenn Sie z. B. eine Reihe identischer Boxen wie die hier gezeigten anlegen müssen, ist Flex vielleicht die bessere Wahl.

  • Ein neues Video von LS-Alarm.

    Ein Video läßt sich auch hier integrieren. Allerdings muß auf das Format (z.B. 16:9) und die Dateigrößen (hier mit 12,3MB) geachtet werden.

Titel und weitere Informationen.

Die hier angebotene Lösung wird durch die fehlende Unterstützung von Teilrastern eingeschränkt. Wären Subgrids verfügbar, wäre die Lösung noch ausgefeilter.


Abgesehen davon war es das Fehlen eines Untergitters, das mich auf diese Lösung gebracht hat, und sie hat praktische Anwendungen weit über die aktuelle Demo hinaus. Vielleicht hat das Fehlen von Subgrid also die Tür zu anderen, interessanteren Möglichkeiten geöffnet?