Container queries: componentes que responden a su contenedor

Las media queries tienen un punto ciego: miden la VENTANA, pero una tarjeta no vive en la ventana — vive en una columna, un sidebar, un grid. La misma tarjeta puede tener 600px disponibles en un lugar y 250px en otro CON LA MISMA ventana. Container queries resuelve exactamente eso, y cambió cómo se construyen componentes.

El problema que las media queries no ven

Tu tarjeta de noticia se ve perfecta a 2 columnas en desktop (cada una con ~500px). Ahora el diseño la pone TAMBIÉN en el sidebar de 250px... en la misma pantalla de desktop. Una media query de width >= 1024px dice "pantalla grande → tarjeta horizontal" — y la del sidebar revienta, apretada en 250px con layout de 500.

La solución en dos pasos

La tarjeta se vuelve horizontal donde su contenedor le da ≥400px y se queda vertical donde no — ambas en la misma pantalla, con el mismo CSS. El componente dejó de preguntar "¿qué pantalla es?" y pregunta lo correcto: "¿cuánto espacio TENGO?".

<div class="ancha"><article class="tarjeta"><div class="thumb"></div><div><h4>En la columna ancha</h4><p>Mi contenedor me da espacio: me pongo horizontal.</p></div></article></div>
<div class="angosta"><article class="tarjeta"><div class="thumb"></div><div><h4>En el sidebar</h4><p>Aquí no cabe el layout horizontal: sigo vertical.</p></div></article></div>

body { font-family: system-ui; padding: 16px; display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.ancha { flex: 1 1 320px; container-type: inline-size; }
.angosta { flex: 0 1 180px; container-type: inline-size; }
.tarjeta { background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; }
.thumb { background: linear-gradient(135deg, #6d28d9, #2563eb); border-radius: 8px; height: 70px; min-width: 90px; margin-bottom: 8px; }
.tarjeta h4 { margin: 0 0 4px; font-size: 14px; color: #1e293b; }
.tarjeta p { margin: 0; font-size: 12px; color: #64748b; line-height: 1.5; }
@container (width >= 300px) {
.tarjeta { display: flex; gap: 12px; align-items: flex-start; }
.thumb { margin-bottom: 0; }
}

La MISMA tarjeta, el MISMO CSS — dos layouts según el contenedor. Ese es el truco completo.

El criterio de decisión

• Media queries: el layout MACRO de la página — cuántas columnas tiene el esqueleto, si el sidebar existe, la navegación. (Y las prefers-*, que no tienen versión container.)
• Container queries: TODO componente reutilizable que vivirá en espacios distintos — tarjetas, widgets, formularios embebidos.

La página decide su estructura con media queries; los componentes se defienden solos con container queries. Así, mover una tarjeta de la columna al sidebar cuesta CERO CSS nuevo.

Mini-reto

Toma la tarjeta de noticia de tu periódico y hazla container-aware: vertical por defecto, horizontal (miniatura a la izquierda) cuando su contenedor le dé ≥350px. Ponla en el main Y en el aside, y verifica que cada instancia decide sola.

Qué sigue

Componentes que se adaptan al espacio. La próxima lección adapta el CONTENIDO más pesado: imágenes responsivas de verdad — srcset y sizes a fondo, y el art direction con picture.