Vorher vs. Nachher: Media Queries vs. Container Queries + Subgrid

Vorher vs. Nachher: Media Queries vs. Container Queries + Subgrid

In der „alten Welt“ steuern wir Layouts über Viewport‑Media‑Queries. Das ist okay für grobe Umschaltpunkte (Mobile/Tablet/Desktop), ignoriert aber, wie breit der Container der Komponente ist. Das führt dazu, dass dieselbe Card im Main gut aussieht, in der Sidebar aber gequetscht wird. Container Queries lösen genau das: Die Komponente reagiert auf ihre eigene Breite. Und Subgrid sorgt dafür, dass Spalten/Zeilen über mehrere Einträge hinweg perfekt fluchten.

Früher: Viewport‑Media‑Queries

/* Basis */
.product-card { display: grid; gap: 12px; }
/* Viewport groß ⇒ versuche Zweispalter überall */
@media (min-width: 900px) {
.product-card { grid-template-columns: 1fr 1.2fr; align-items: center; }
.product-card img { height: 100%; }
}

Problem: Die Regel springt auch in der Sidebar an – obwohl der Container zu schmal ist.

Heute: Container‑intelligente Komponenten

.product-card { display: grid; gap: 12px; container-type: inline-size; }
/* Ab ~480px Containerbreite: Bild links, Text rechts */
@container (min-width: 480px) {
.product-card { grid-template-columns: 1fr 1.2fr; align-items: center; }
.product-card img { height: 100%; }
}
/* Ab ~720px Containerbreite: großzügigere Typo/Spacing */
@container (min-width: 720px) {
.product-card { grid-template-columns: 1.2fr 1.3fr; gap: 18px; }
.product-card h4 { font-size: 1.25rem; }
.product-card .desc { font-size: 1.05rem; line-height: 1.6; }
}

Die Card bleibt in der Sidebar gestapelt, im Main wird sie Zweispalter – ohne Zusatzklassen.

Subgrid: Ausrichtung, die wirklich durchzieht

.timeline { display:grid; grid-template-columns: 120px 1fr; gap: 12px 18px; }
.event   { display:grid; grid-template-columns: 120px 1fr; gap: 8px 14px; } /* Fallback */
@supports (grid-template-columns: subgrid) {
.event {
grid-column: 1 / -1;
grid-template-columns: subgrid; /* übernimmt 120px | 1fr exakt */
column-gap: inherit;
}
}

Live‑Vergleich

Vorher ansehen · Nachher ansehen

Best Practices

• Nutze natürliche Container‑Breakpoints (z. B. 480px, 720px), wo die Komponente „kippt“.
• Setze progressive Enhancement ein: Basis‑Layout zuerst, moderne Features als Upgrade.
• CQ‑Units (cqw/cqh) und clamp() helfen bei typografischer Skalierung pro Komponente.

Modern‑only: Ohne Support bleiben Basis‑Layouts aktiv. So bleibt alles nutzbar.