# Container queries (size) + cqi/cqw units

Status: Baseline 2023 (Chrome 105, Safari 16, Firefox 110); seit 2025 breit verfügbar. Reine Namensabfragen (ohne Größenbedingung) sind Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149).  
Quelle: https://web.dev/baseline/2026 and https://developer.chrome.com/release-notes/148  
Seite: https://designforai.dev/de/css/container-queries

Lässt eine Komponente auf die Breite ihres eigenen Containers reagieren statt auf den Viewport. cqi/cqw-Einheiten bemessen Text und Abstände relativ zu diesem Container, sodass eine Karte in einer Sidebar und in einem Hero ohne Media Queries funktioniert.

## HTML

```html
<div class="fx-001">
  <article class="fx-001-card">
    <div style="aspect-ratio:16/10;background:linear-gradient(135deg,#dbeaff,#ece0ff)"></div>
    <div>
      <h3>Container-aware card</h3>
      <p>Resize the wrapper, not the window.</p>
    </div>
  </article>
</div>
```

## CSS

```css
.fx-001{container:card / inline-size;resize:horizontal;overflow:auto;width:60%;min-width:220px;border:1px dashed #999;padding:8px}
.fx-001-card{display:grid;gap:12px;font-family:system-ui}
.fx-001-card img{width:100%;border-radius:8px;display:block}
.fx-001-card h3{font-size:clamp(1rem,4cqi,1.6rem);margin:0}
@container card (min-width: 420px){
  .fx-001-card{grid-template-columns:160px 1fr;align-items:center}
}
```

Fallback: Browser ohne Unterstützung ignorieren @container und zeigen das gestapelte Layout; nichts geht kaputt.

## Prompt

Baue diese Karte als Container-Query-Komponente: setze `container-type: inline-size` (mit einem container-name) auf den Wrapper der Karte, nie auf die Karte selbst, und wechsle mit `@container name (min-width: 420px)` von gestapelt auf zweispaltig. Nutze cqi-Einheiten für die Überschriftengröße (per clamp zwischen rem-Werten begrenzt), damit die Typografie mit dem Container skaliert. Nutze keine Viewport-Media-Queries für das Komponentenlayout.