Container Queries

Das Problem mit Media Queries: sie kennen nur den Viewport

@media (min-width: 600px) {
  .card { display: flex; }
}

Diese Regel greift, wenn das Browserfenster mindestens 600px breit ist. Aber was, wenn dieselbe .card mal in einer breiten Hauptspalte und mal in einer schmalen Sidebar liegt?

<div class="sidebar">      <!-- 250px breit -->
  <article class="card">…</article>   <!-- soll SCHMAL aussehen -->
</div>
<div class="main">         <!-- 900px breit -->
  <article class="card">…</article>   <!-- soll BREIT aussehen -->
</div>

→ Media Queries können das nicht unterscheiden - beide .card-Elemente bekommen dieselbe Regel, obwohl sie in völlig unterschiedlich breiten Containern stecken.

Die Lösung: Container Queries

Container Queries reagieren nicht auf den Viewport, sondern auf die Breite des Eltern-Containers. Zwei Schritte sind nötig:

/* 1. Ein Element zum "Container" erklären */
.sidebar, .main {
  container-type: inline-size;
  container-name: layout;
}

/* 2. Die Regel gilt jetzt relativ zu DIESEM Container */
@container layout (min-width: 600px) {
  .card {
    display: flex;
  }
}

container-type: inline-size - der Container „meldet” jetzt seine Breite nach unten weiter
container-name ist optional, aber hilfreich, wenn mehrere verschachtelte Container existieren
@container verhält sich sonst genau wie @media - gleiche Syntax für min-width/max-width

Praxisbeispiel: eine Card, die sich selbst anpasst

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

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

/* Ab 400px Container-Breite: Bild und Text nebeneinander */
@container (min-width: 400px) {
  .card {
    grid-template-columns: 120px 1fr;
  }
}

Ausführliche Demo

→ Dieselbe .card-Komponente ordnet sich automatisch neu, egal ob sie in einer breiten Hauptspalte oder einer schmalen Sidebar landet - ganz ohne zu wissen, wie breit der Bildschirm insgesamt ist.