Container queries (size) + cqi/cqw units

Baseline 2023 (Chrome 105, Safari 16, Firefox 110); amplamente disponível desde 2025. Queries só por nome (sem condição de tamanho) são Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149).

Chrome 105Edge 105Safari 16Firefox 110

Permite que um componente responda à largura do próprio container em vez da viewport. As unidades cqi/cqw dimensionam texto e espaçamento em relação a esse container, então um mesmo card funciona numa barra lateral e num hero sem 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: Navegadores sem suporte ignoram @container e mostram o layout empilhado; nada quebra.

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

Prompt

Construa este card como um componente de container query: defina `container-type: inline-size` (com um container-name) no wrapper do card, nunca no card em si, e troque de empilhado para duas colunas com `@container name (min-width: 420px)`. Use unidades cqi para o tamanho do título (com clamp entre valores em rem) para a tipografia escalar com o container. Não use media queries de viewport para layout de componente.