Container Queries – Komponenten, die auf ihren Platz reagieren, nicht auf den Bildschirm

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.

Quellen

• CSS Container Queries — MDN
• CSS Containment Module Level 3 — W3C-Entwurf