CSS Container Queries: Komponenten nach ihrem Container stylen, nicht nach dem Viewport

Container Queries lassen ein Element auf die Größe seines übergeordneten Containers reagieren statt auf die Größe des gesamten Viewports. Das ist das fehlende Teil, das eine Komponente endlich wiederverwendbar macht: dieselbe Karte kann in einer schmalen Seitenleiste auf eine Weise und in einer breiten Hauptspalte auf eine andere Weise layouten — auf derselben Seite, bei derselben Bildschirmbreite.

Warum Media Queries nicht ausreichten

Eine Media Query stellt nur eine Frage: wie breit ist der Viewport? Aber eine Komponente weiß nicht, wie breit der Viewport ist — sie weiß, wie viel Platz ihr gegeben wurde. Eine Karte, die in eine 300px breite Seitenleiste fällt, und dieselbe Karte in einer 900px breiten Rasterzelle brauchen unterschiedliche Layouts, obwohl die Viewport-Breite identisch ist. Container Queries lösen genau das.

Schritt 1: einen Containment-Kontext deklarieren

Du fragst einen Container ab, also musst du zuerst ein Element mit container-type als Container markieren:

.card-wrapper {
  container-type: inline-size;
}

inline-size bedeutet „lass mich die inline (meist horizontale) Dimension abfragen" — die häufigste Wahl. size fragt beide Dimensionen ab, und normal schaltet das Containment ab.

Schritt 2: mit @container abfragen

Jetzt kann sich jeder Nachfahre von .card-wrapper an die Breite des Wrappers anpassen:

.card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 150px 1fr;
  }
}

Wenn der Wrapper mindestens 400px breit ist, wechselt die Karte zu einem zweispaltigen Layout. Setze dasselbe Markup irgendwo auf die Seite und es passt sich dort an, wo es landet — ohne Media Queries auf Seitenebene.

Container benennen

Wenn Container verschachtelt sind, gib ihnen mit container-name Namen, damit eine Query den richtigen anvisiert:

.layout { container: layout / inline-size; } /* name / type shorthand */

@container layout (min-width: 600px) {
  .card { /* responds to .layout, not a closer container */ }
}

Container-Query-Einheiten

Container Queries schalten außerdem Einheiten frei, die sich auf den Container statt auf den Viewport beziehen: cqw (1 % der Container-Breite), cqh, cqi (inline) und cqb (block). Fluide Typografie, die mit ihrem Container skaliert, wird zum Einzeiler:

.card h2 {
  font-size: clamp(1rem, 5cqi, 2rem);
}

Container Queries vs. Media Queries

	Media Query	Container Query
Misst	Viewport / Gerät	Nächster dimensionierter Vorfahre
Setup nötig	Keines	container-type auf einem Elternteil
Am besten für	Layout auf Seitenebene	Wiederverwendbare Komponenten
Einheiten	vw, vh	cqw, cqi, ...

Browser-Support

Size-Container-Queries werden in aktuellem Chrome, Edge, Firefox und Safari unterstützt. Sie sind kein Ersatz für Media Queries — nutze Media Queries für die Gesamtstruktur der Seite und Container Queries für Komponenten, die portierbar sein müssen. Beide arbeiten gut zusammen.

Der mentale Wandel ist klein, aber kraftvoll: hör auf zu fragen „wie groß ist der Bildschirm?" und fang an zu fragen „wie viel Platz hat diese Komponente?". Genau diese eine Änderung macht die Komponenten eines Designsystems wirklich überall einsetzbar.