Modernes Layout mit CSS Container Queries

CSS Container Queries stellen eine der bedeutendsten Layout-Fähigkeiten dar, die der Web-Plattform in den letzten Jahren hinzugefügt wurden. Im Gegensatz zu Media Queries, die auf Viewport-Abmessungen reagieren, ermöglichen Container Queries Komponenten, sich basierend auf der Größe ihres Parent-Containers anzupassen. Dieser Wandel von seitenbezogener zu komponentenbezogener Responsiveness löst ein langjähriges Problem in Design-Systems: wirklich wiederverwendbare Komponenten zu bauen, die in jedem Kontext korrekt aussehen, ohne globale Breakpoint-Overrides.

Container Queries vs. Media Queries

Media Queries revolutionierten responsives Design, indem sie Styles basierend auf Viewport-Breite ändern ließen. Aber Viewport-Breite ist ein schlechter Proxy für den einer einzelnen Komponente verfügbaren Platz. Ein Sidebar-Widget, eine Dashboard-Karte und ein vollbreiter Hero-Abschnitt existieren alle bei unterschiedlichen Breiten, selbst wenn der Viewport identisch ist.

Diese Diskrepanz zwingt Entwickler zu umständlichen Workarounds:

• Breakpoint-Props von Parent-Komponenten übergeben, um Child-Styles zu überschreiben.
• JavaScript Resize Observer verwenden, um Klassen basierend auf Elementbreite zu togglen.
• Duplizierte Komponenten-Varianten für verschiedene Layout-Kontexte erstellen.
• Auf CSS-Grid- und Flexbox-Tricks setzen, die brechen, wenn sich das Layout ändert.

Container Queries eliminieren diese Workarounds. Eine in einem Container-Kontext eingewickelte Komponente passt ihr internes Layout automatisch an, wenn sich ihr zugewiesener Platz ändert — ob durch Viewport-Resize, Sidebar-Toggle oder Grid-Spalten-Umfluss.

Die @container-Regel

Container Queries verwenden zwei CSS-Konstrukte: die container-type-Property auf einem Parent-Element und die @container-At-Rule auf Nachfahren-Styles. Der Parent deklariert sich als Query Container, und Kinder schreiben bedingte Styles basierend auf den Abmessungen des Containers.

/* Parent establishes a query container */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Each card container enables size queries for its children */
.product-card {
  container-type: inline-size;
  container-name: card;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Child styles respond to container width, not viewport */
@container card (min-width: 400px) {
  .product-card .card-body {
    display: flex;
    gap: 1rem;
  }

  .product-card .card-image {
    width: 40%;
    flex-shrink: 0;
  }

  .product-card .card-details {
    flex: 1;
  }
}

@container card (max-width: 399px) {
  .product-card .card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

Die container-type-Property akzeptiert inline-size (Breite in horizontalen Schreibmodi), size (sowohl Breite als auch Höhe) oder normal (kein Container). Die meisten Layout-Anwendungsfälle benötigen nur inline-size, was auch die performanteste Option ist, weil der Browser nur eine Dimension trackt.

Container-Query-Einheiten

Container Queries führten neue CSS-Längeneinheiten ein, die auf die Abmessungen des Query Containers statt auf den Viewport referenzieren. Diese Einheiten ermöglichen fluide Typografie und Abstände, die mit der Komponentengröße skalieren.

• cqw — 1 % der Breite des Query Containers.
• cqh — 1 % der Höhe des Query Containers.
• cqi — 1 % der Inline-Größe des Query Containers.
• cqb — 1 % der Block-Größe des Query Containers.
• cqmin — Der kleinere Wert von cqi und cqb.
• cqmax — Der größere Wert von cqi und cqb.

.stat-widget {
  container-type: inline-size;
}

.stat-widget .value {
  /* Font size scales with container width */
  font-size: clamp(1.5rem, 5cqi, 3rem);
}

.stat-widget .label {
  font-size: clamp(0.75rem, 2.5cqi, 1rem);
}

Kombinieren Sie Container-Query-Einheiten mit clamp(), um Typografie zu erstellen, die sanft innerhalb einer Komponente skaliert, ohne harte Breakpoint-Sprünge. Ein Stat-Widget in einer schmalen Sidebar-Spalte rendert kleineren Text, während dieselbe Komponente in einem breiten Dashboard-Panel größeren Text rendert — automatisch, ohne Props oder JavaScript.

Style Queries und Container-Query-Features

Über Size Queries hinaus umfasst die CSS-Container-Queries-Spezifikation Style Queries, die auf berechnete Style-Werte des Containers reagieren. Sie können Custom-Property-Werte abfragen und Komponenten Bewusstsein für den Theme-Kontext ihres Parents geben.

.theme-container {
  container-type: inline-size;
  --variant: default;
}

.theme-container[data-variant="compact"] {
  --variant: compact;
}

@container style(--variant: compact) {
  .nested-component {
    padding: 0.5rem;
    font-size: 0.875rem;
  }
}

Style Queries sind besonders mächtig in Design-Systems, wo ein Container semantische Tokens setzt und Child-Komponenten ihre Dichte, Abstände und Typografie entsprechend anpassen. Dieses Muster ersetzt Prop-Drilling von Variant-Flags durch Komponentenbäume.

Responsive Komponenten ohne Media Queries bauen

Das praktische Ziel von Container Queries sind Komponenten, die überall korrekt funktionieren, wo sie platziert werden. Betrachten Sie eine Datentabellen-Komponente, die in einer Vollseiten-Ansicht, einem Modal-Dialog und einem Dashboard-Widget verwendet wird. Mit Media Queries allein teilen alle drei Instanzen dieselbe Breakpoint-Logik, die an die Viewport-Breite gebunden ist, und produzieren defekte Layouts in mindestens einem Kontext.

Mit Container Queries definiert die Tabellen-Komponente ihr eigenes responsives Verhalten:

• Über 600px Container-Breite — Alle Spalten in einem Standard-Tabellen-Layout anzeigen.
• 400px bis 600px — Niedrigpriorisierte Spalten ausblenden, Padding reduzieren.
• Unter 400px — Zu einem gestapelten Karten-Layout mit Label-Wert-Paaren wechseln.

.data-table-wrapper {
  container-type: inline-size;
  container-name: table;
  overflow-x: auto;
}

@container table (max-width: 399px) {
  .data-table thead {
    display: none;
  }

  .data-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
  }
}

Diese Komponente benötigt null Wissen über das Layout ihres Parents. Platzieren Sie sie in jeden Container und sie passt sich an. Das ist das Versprechen von Container Queries erfüllt.

Framework-Integration

Moderne CSS-Frameworks umarmen Container Queries nativ. Tailwind CSS v4 enthält Container-Query-Varianten — prefixen Sie Utilities mit @ gefolgt vom Breakpoint, um Styles basierend auf Container-Größe anzuwenden. Styled-components und andere CSS-in-JS-Bibliotheken unterstützen die @container-At-Rule in Template-Literals ohne zusätzliche Konfiguration.

In React-Komponentenbibliotheken etablieren Sie Container-Kontext an der Komponenten-Root und lassen interne Elemente Container Queries für Layout-Entscheidungen verwenden. Dokumentieren Sie, welche Komponenten container-aware sind, damit Konsumenten wissen, sie nicht unter ihrer minimalen funktionalen Breite einzuschränken.

Browser-Support und Progressive Enhancement

Container Queries genießen 2026 breite Browser-Unterstützung mit Abdeckung über Chrome, Firefox, Safari und Edge. Für den kleinen Prozentsatz von Legacy-Browsern ohne Support wenden Sie Progressive Enhancement an: gestalten Sie die Standard-Styles für die häufigste Container-Größe und fügen Sie Container-Query-Overrides für unterstützende Browser hinzu.

Verwenden Sie die @supports-Regel, um Container-Query-Support zu erkennen und Media-Query-Fallbacks bereitzustellen, wo nötig:

/* Fallback for browsers without container query support */
@media (max-width: 600px) {
  .product-card .card-body {
    flex-direction: column;
  }
}

/* Enhanced layout for supporting browsers */
@supports (container-type: inline-size) {
  @container card (max-width: 399px) {
    .product-card .card-body {
      flex-direction: column;
    }
  }
}

Container Queries markieren eine Reifung von CSS als Sprache für komponentengetriebenes Design. Durch die Verlagerung responsiver Logik von der Seitenebene auf die Komponentenebene ermöglichen sie Design-Systems, in denen jede Komponente wirklich eigenständig, adaptiv und wiederverwendbar ist. Übernehmen Sie Container Queries in Ihrem nächsten Projekt und erleben Sie responsives Design, so wie es immer gedacht war.