Container queries (size) + cqi/cqw units

Baseline 2023 (Chrome 105, Safari 16, Firefox 110); widely available since 2025. Name-only queries (no size condition) are Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149).

Chrome 105Edge 105Safari 16Firefox 110

Lets a component respond to the width of its own container instead of the viewport. cqi/cqw units size text and spacing relative to that container, so one card works in a sidebar and a hero without media queries.

Container-aware card

Resize the wrapper, not the window.

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}
}

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>

Fallback: Unsupported browsers ignore @container and show the stacked layout; nothing breaks.

Source: web.dev/baseline/2026 and https://developer.chrome.com/release-notes/148

Prompt

Build this card as a container-query component: set `container-type: inline-size` (with a container-name) on the card's wrapper, never on the card itself, and switch from stacked to two-column with `@container name (min-width: 420px)`. Use cqi units for the heading size (clamped between rem values) so typography scales with the container. Do not use viewport media queries for component layout.