Container queries (size) + cqi/cqw units

Baseline 2023 (Chrome 105, Safari 16, Firefox 110); disponible de forma generalizada desde 2025. Las consultas solo por nombre (sin condición de tamaño) son Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149).

Chrome 105Edge 105Safari 16Firefox 110

Permite que un componente responda al ancho de su propio contenedor en lugar del viewport. Las unidades cqi/cqw dimensionan texto y espaciado en relación a ese contenedor, así que una misma tarjeta funciona en una barra lateral y en un hero sin 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: Los navegadores sin soporte ignoran @container y muestran el diseño apilado; nada se rompe.

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

Prompt

Construye esta tarjeta como un componente con container queries: pon `container-type: inline-size` (con un container-name) en el wrapper de la tarjeta, nunca en la tarjeta misma, y cambia de apilado a dos columnas con `@container name (min-width: 420px)`. Usa unidades cqi para el tamaño del título (acotadas con clamp entre valores rem) para que la tipografía escale con el contenedor. No uses media queries de viewport para el layout del componente.