Sidebar/Main Vergleich: Viewport‑MQ vs. Container Queries + Subgrid

Links: „Früher“ mit Viewport‑Media‑Queries. Rechts: „Heute“ mit @container (Card) und Subgrid (Timeline).

Zieh das Fenster in der Breite – achte darauf, wie sich die Sidebar‑Cards links quetschen, während sie rechts sauber gestapelt bleiben.

Vorher · Viewport‑Media‑Queries

Main Content

Fluss

Card im Main

Hier passt der Zweispalter – aber dieselbe Regel greift fälschlich auch in der Sidebar.

Adler

Noch eine Card

Viewport‑Breakpoints berücksichtigen den Container nicht.

14:30
Dev Handoff

Langer Blindtext – Spalten wirken ähnlich, sind aber nicht exakt deckungsgleich.

Nachher · @container + Subgrid

Main Content

Fluss

Card im Main

Container breit ⇒ Zweispalter, großzügigere Typo/Spacing.

Adler

Noch eine Card

Gleiches Markup, container‑intelligentes Verhalten.

14:30
Dev Handoff

Langer Blindtext – Spalten bleiben exakt deckungsgleich.