CSS Container Queries: responsives Layout basierend auf dem Container, nicht dem Bildschirm

Jahrelang bedeutete responsives Design in CSS fast immer, auf die Breite des Browserfensters über Media Queries zu reagieren. Das funktioniert gut für das allgemeine Layout einer Seite, stößt aber an Grenzen, sobald man wiederverwendbare Komponenten baut: eine Karte, ein Sidebar-Widget, alles, was sich an den tatsächlich verfügbaren Platz anpassen muss und nicht an den Bildschirm des Nutzers. CSS Container Queries lösen genau dieses Problem, und 2026 sind sie eine ausgereifte Technologie, die von allen wichtigen modernen Browsern unterstützt wird.

Dieser Artikel erklärt, was sie sind, wie man sie in der Praxis einsetzt und wann sie neben Media Queries bestehen, statt sie zu ersetzen.

Was Container Queries sind und wofür man sie braucht

Eine Container Query wendet CSS-Regeln auf ein Element basierend auf der Größe (oder dem Stil) seines umgebenden Elements an, statt auf das Viewport. In der Praxis: Setzt man dieselbe Karte in eine breite Spalte und in eine schmale Sidebar, kann sie automatisch Layout, Schriftgröße oder Anordnung ihres Inhalts ändern, je nachdem, wie viel Platz tatsächlich um sie herum verfügbar ist – unabhängig von der gesamten Bildschirmbreite.

Das macht echtes Design auf Komponentenebene möglich: Derselbe HTML/CSS-Block lässt sich an verschiedenen Stellen einer Website wiederverwenden und verhält sich überall intelligent, wo er landet.

Ein Element zum Container machen: container-type und container-name

Damit ein Element von seinen Kindern "abgefragt" werden kann, muss es zunächst mit der Eigenschaft container-type als Query-Container deklariert werden:

• inline-size: der häufigste Fall, ermöglicht Abfragen nur basierend auf der Inline-Dimension des Containers (meist seiner Breite).
• size: aktiviert Abfragen sowohl für Breite als auch Höhe, erfordert aber eine explizit definierte Höhe des Containers, sonst kann der Inhalt kollabieren.
• normal: der Standardwert; das Element ist kein Größen-Query-Container, kann aber trotzdem für reine Namens- oder Stil-Abfragen verwendet werden.

Ein minimales Beispiel:

.post {
  container-type: inline-size;
}

Wenn eine Seite mehrere verschachtelte Container enthält, hilft es, sie mit container-name zu unterscheiden, damit spätere Regeln wissen, auf welchen Container sie sich beziehen:

.post {
  container-type: inline-size;
  container-name: artikel;
}

Beide Eigenschaften lassen sich auch in Kurzschreibweise mit der Syntax container: name / typ; notieren, zum Beispiel container: artikel / inline-size;.

Die @container-Syntax in der Praxis

Sobald ein Container definiert ist, schreibt man Regeln mit der At-Regel @container, deren Form stark an @media erinnert:

@container (width > 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Um einen bestimmten Container unter mehreren verschachtelten anzusprechen, fügt man seinen Namen vor der Bedingung hinzu:

@container artikel (width > 700px) {
  .card { font-size: 2em; }
}

Ein häufiger praktischer Fall ist eine Karte, die Titel und Bild bei knappem Platz stapelt (etwa in einer Sidebar) und nebeneinander anordnet, wenn der Container breiter ist (etwa im Hauptbereich einer Seite): Genau dasselbe HTML-Markup ändert sein Verhalten automatisch, ganz ohne zusätzliche Klassen oder JavaScript.

Container-relative Längeneinheiten

Wenn ein Element ein Container vom Typ size oder inline-size ist, werden spezielle Längeneinheiten verfügbar, mit denen Schriftgrößen, Abstände oder Elemente proportional zum Container statt zum Viewport dimensioniert werden können:

• cqw: 1 % der Breite des Containers.
• cqh: 1 % der Höhe des Containers.
• cqi: 1 % der Inline-Größe des Containers (meist die Breite, bei horizontaler Schreibrichtung).
• cqb: 1 % der Block-Größe des Containers (meist die Höhe).
• cqmin: der kleinere Wert von cqi und cqb.
• cqmax: der größere Wert von cqi und cqb.

Ein typisches Beispiel ist eine Überschrift, die proportional zum verfügbaren Platz fließend wächst, indem cq-Einheiten mit clamp() oder max() kombiniert werden:

.card h2 {
  font-size: max(1.5em, 1.23em + 2cqi);
}

Hat ein Element keinen gültigen Vorfahren-Container, greifen diese Einheiten sicherheitshalber auf die entsprechenden Small-Viewport-Einheiten zurück, damit das Layout nie zusammenbricht.

Container Style Queries: ein Schritt über die Größe hinaus

Neben Größenabfragen führt die Spezifikation auch Container Style Queries ein, die Regeln basierend auf dem Stil des Containers anwenden (zum Beispiel den Wert einer benutzerdefinierten CSS-Eigenschaft), nicht nur auf seinen Dimensionen: @container style(--thema: dunkel) { ... }. Dies ist eine neuere Funktion, die im Gegensatz zu den inzwischen überall stabilen Größenabfragen noch nur teilweise unterstützt wird: vollständig verfügbar in Firefox, nur teilweise in Chrome, Edge und Safari. Für den produktiven Einsatz empfiehlt es sich daher heute, bei Größenabfragen zu bleiben und Style Queries als aufkommende Technik zu behandeln, die man vorsichtig testet.

Browserunterstützung im Jahr 2026

Größenbasierte Container Queries (basierend auf container-type: size oder inline-size) gelten inzwischen als solide, etablierte Technologie: unterstützt von Chrome und Edge ab Version 106, von Safari ab Version 16 und von Firefox ab Version 110, ebenso wie von den jeweiligen mobilen Versionen (Safari unter iOS, Chrome für Android, Samsung Internet, Firefox für Android). Die weltweite Unterstützung liegt heute bei über 94 % der Nutzer und fehlt nur bei veralteten oder Nischen-Browsern wie Internet Explorer, Opera Mini oder einigen regionalen Android-Browsern (UC Browser, QQ Browser, Baidu Browser). Für die meisten modernen Webprojekte können größenbasierte Container Queries daher weitgehend bedenkenlos eingesetzt werden, gegebenenfalls mit einem flexbox- oder grid-Fallback für das verbleibende Publikum auf sehr alten Browsern.

Container Queries oder Media Queries: was wann verwenden

Die beiden Techniken stehen nicht in Konkurrenz, sondern lösen unterschiedliche Probleme:

• Media Queries bleiben die richtige Wahl für das allgemeine Seitenlayout: Anzahl der Spalten, Sichtbarkeit eines Menüs, Verhalten des gesamten Rasters basierend auf dem Viewport.
• Container Queries sind die richtige Wahl für einzelne Komponenten, die wiederverwendbar und sich des Platzes, in dem sie eingesetzt werden, "bewusst" sein müssen: Karten, Widgets, Design-System-Bausteine, Sidebar-Elemente.

In realen Projekten bestehen beide Techniken problemlos nebeneinander: Media Queries definieren das allgemeine Grundgerüst der Seite, während Container Queries das Verhalten der darin enthaltenen Komponenten verfeinern. Dieser Perspektivwechsel ist besonders nützlich für Teams, die mit Design-Systemen und Komponentenbibliotheken arbeiten, bei denen derselbe Interface-Block überall gut funktionieren muss, wo er platziert wird.

Fazit

CSS Container Queries schließen eine langjährige Lücke im responsiven CSS: die Möglichkeit, dass eine Komponente auf Basis ihres eigenen tatsächlichen Platzes reagiert, nicht nur auf das Browserfenster. Mit inzwischen solider Browserunterstützung für Größenabfragen ist jetzt ein guter Zeitpunkt, sie in eigenen Projekten einzuführen – vielleicht beginnend mit einer einzelnen Komponente (einer Karte, einem Infokasten), bevor man den Ansatz auf ein ganzes Design-System ausweitet. Style Queries, die sich noch in der Verbreitung befinden, lohnt es sich für die nahe Zukunft im Auge zu behalten.

Offizielle Quellen

• MDN Web Docs – CSS container queries
• MDN Web Docs – Using container size and style queries
• Can I use – CSS Container Queries (Size)
• Can I use – CSS Container Style Queries