# Container queries (size) + cqi/cqw units

Status: 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).  
Fonte: https://web.dev/baseline/2026 and https://developer.chrome.com/release-notes/148  
Página: https://designforai.dev/pt/css/container-queries

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.

## 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: Navegadores sem suporte ignoram @container e mostram o layout empilhado; nada quebra.

## 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.