Container Queries – Komponenten, die auf ihren Platz reagieren, nicht auf den Bildschirm
Media Queries fragen die Bildschirmbreite ab. Container Queries fragen, wie breit der Container einer Komponente gerade ist – so passt sich eine Karte in der Sidebar anders an als dieselbe Karte im Hauptbereich. Endlich wirklich wiederverwendbare Bausteine.
Media Queries kennen nur eine Größe: die des Browserfensters. Das Problem: Dieselbe Karten-Komponente steht mal in einer schmalen Sidebar, mal im breiten Hauptbereich – die Fensterbreite sagt darüber nichts. Container Queries lösen das: Eine Komponente reagiert auf die Breite ihres eigenen Containers.
Container festlegen
Zuerst erklärst du ein Element zum Abfrage-Container:
.karten-bereich {
container-type: inline-size; /* misst die eigene Breite */
container-name: karte; /* optionaler Name */
}Auf die Container-Breite reagieren
.karte {
display: grid;
gap: 12px;
}
/* Ab 400px CONTAINER-Breite: Bild und Text nebeneinander */
@container karte (min-width: 400px) {
.karte {
grid-template-columns: 140px 1fr;
}
}Der Unterschied zu @media ist entscheidend: @container fragt nicht den Bildschirm, sondern den nächsten Vorfahren mit container-type. Steht dieselbe Karte in einer 300 px schmalen Spalte, bleibt sie einspaltig; im 800 px breiten Bereich wird sie zweispaltig – ganz automatisch, im selben Layout.
Warum das ein großer Schritt ist
Bisher musste eine Komponente „wissen", wo auf der Seite sie steht, um responsiv zu sein. Mit Container Queries ist sie wirklich in sich geschlossen: Du baust die Karte einmal und kannst sie überall einsetzen – sie passt sich immer an den Platz an, den sie tatsächlich bekommt.
Container Queries werden inzwischen von allen aktuellen Browsern unterstützt. Für ganz alte Browser bleibt die einspaltige Basis eine saubere Rückfalllösung.
Damit baue ich Bausteine, die in jedem Layout funktionieren. Mehr HTML- & CSS-Snippets findest du auf code.bymw.de.
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
Sanfte Übergänge in CSS – Hover-Effekte mit transition statt harter Sprünge
Ein guter Hover-Effekt springt nicht, er gleitet. Mit transition animierst du Farbe, Größe und Schatten weich – in einer Zeile. Ich zeige das Muster, warum du niemals transition: all nimmst und wie du Nutzer mit Bewegungsempfindlichkeit respektierst.
position: sticky – ein Header, der beim Scrollen oben kleben bleibt
Für einen mitfahrenden Header brauchst du kein JavaScript. Zwei CSS-Zeilen genügen mit position: sticky. Ich zeige das Muster, erkläre die eine Voraussetzung, die oft vergessen wird, und den häufigsten Grund, warum es „nicht klebt".
CSS-Variablen und Dark Mode – ein Theme, das sich selbst umschaltet
Mit CSS Custom Properties definierst du Farben an einer Stelle und nutzt sie überall. Der Clou: Für den Dark Mode überschreibst du nur die Variablen – nicht jede einzelne Regel. Ich zeige beides, inklusive automatischer System-Erkennung.