Was ist eine Container Query?
Eine Container Query ist eine Regel im CSS, die auf das umgebende Element reagiert, nicht auf das ganze Browserfenster. MDN beschreibt sie so: Die Regel @container wendet Stile abhängig von Größe oder Merkmalen eines umgebenden Elements an statt des Viewports.
Der Unterschied zur Media Query: Die fragt, wie breit der Bildschirm ist. Die Container Query fragt, wie viel Platz der Baustein hat. Eine Karte kann so in einer schmalen Spalte untereinander stehen und in einer breiten Spalte nebeneinander, auf demselben Bildschirm.
So sieht das im Code aus
Zwei Schritte reichen. Erst machst du ein Elternelement zum Container, dann schreibst du die Abfrage:
Beispiel in CSS
.spalte { container-type: inline-size; } @container (width > 400px) { .karte { display: flex; } }
Heißt: Ist die Spalte breiter als 400 Pixel, stehen Bild und Text der Karte nebeneinander.
- container-type: meist inline-size, also die Breite. size nimmt auch die Höhe dazu.
- container-name: optional, wenn du gezielt einen bestimmten Container abfragen willst.
- Einheiten: cqi oder cqw sind 1 % der Container-Breite. Damit wächst etwa eine Überschrift mit ihrem Platz.
Dazu gibt es Style Queries: Sie fragen statt der Größe einen Stilwert ab. Bisher funktioniert das nur mit CSS-Variablen.
Kann ich das schon einsetzen?
Case A · Unterstützung
Container Queries nach Größe, Stand November 2026
95,96 %
weltweite Nutzung mit Support
14.08.2025
breit verfügbar laut Baseline
Seit Februar 2023 in allen großen Browsern
Chrome und Edge seit Version 105, Safari seit 16, Firefox seit 110. Baseline ist der Status, den web.dev für breite Verfügbarkeit vergibt.
Case B · Verbreitung
Anteil der Chrome-Seitenaufrufe mit Container Queries
rund 15 %
November 2025
rund 30 %
November 2026
In einem Jahr ungefähr verdoppelt
Messdaten von Chrome Platform Status. Style Queries liegen dagegen bei rund 1 %.
Für Größen-Abfragen lautet die Antwort also: ja. Style Queries sind erst seit Mai 2026 in allen großen Browsern angekommen. Dort lohnt noch ein kurzer Blick auf caniuse.
Container Queries und Elementor
Achtung, Verwechslungsgefahr: Der „Container“ in Elementor ist ein Layout-Baustein mit Flexbox oder Grid. Mit CSS-Container-Queries hat er nichts zu tun.
Die Breakpoints in Elementor hängen am Fenster, Standard sind 767 und 1024 Pixel. Eine Einstellung für Container Queries gibt es im Editor nicht. In der Community stehen dazu offene Wünsche, etwa seit Februar 2023. Wer sie nutzen will, schreibt eigenes CSS, zum Beispiel im Child-Theme.
Häufige Fehler
Fehler 1 · Container nicht festlegen
Ohne container-type am Elternelement greift @container ins Leere. Laut MDN musst du Größen-Container ausdrücklich deklarieren.
Fehler 2 · Den Container selbst gestalten wollen
Die Abfrage wirkt auf die Elemente im Container, nicht auf den Container. Willst du die Spalte selbst ändern, brauchst du eine Ebene darüber.
Fehler 3 · size statt inline-size
size überwacht auch die Höhe. Hat der Container keine feste Höhe, verhält er sich anders als erwartet. Für fast alle Fälle reicht inline-size.
Fehler 4 · Media Queries ganz abschaffen
Fürs Seitenraster, den Dark Mode oder den Druck bleibt die Media Query zuständig. Beide ergänzen sich.
Wann du Container Queries brauchst
- Wiederverwendbare Bausteine: Karten, Teaser oder Formulare, die an verschiedenen Stellen stehen.
- Seitenleisten: Inhalte, die mal schmal, mal breit dargestellt werden.
- Design-Systeme: Komponenten, die ohne Wissen über die Seite funktionieren sollen.
Häufige Fragen
Was ist der Unterschied zwischen Container Query und Media Query?
Die Media Query fragt Fenster oder Gerät ab, die Container Query die Größe des umgebenden Elements. Die eine ist fürs Seitenlayout, die andere für Bausteine, die an verschiedenen Orten stehen.
Welche Browser unterstützen Container Queries?
Alle großen: Chrome und Edge ab Version 105, Safari ab 16, Firefox ab 110. Laut caniuse decken sie rund 96 % der weltweiten Browsernutzung ab.
Kann ich Container Queries in Elementor nutzen?
Nicht über den Editor, dort hängen die Breakpoints am Fenster. Mit eigenem CSS im Child-Theme kannst du sie trotzdem einsetzen.
Was bedeuten cqi und cqw?
Das sind Einheiten relativ zum Container. 1 cqw ist 1 % der Container-Breite, 1 cqi 1 % der Inline-Größe, bei normaler Schreibrichtung also ebenfalls die Breite.
