Container Queries: componentes realmente responsivos

Aprende a adaptar un componente por el tamaño de su contenedor con @container, container-type y unidades cqi/cqw.

Las media queries responden al viewport; las container queries responden al espacio real del componente.

Con container-type defines el contexto; con @container aplicas reglas condicionales dentro de ese contexto.

Puedes combinarlo con cqi/cqw para escalas fluidas orientadas al contenedor y no a la ventana completa.

Esta técnica mejora la reutilización: el mismo componente funciona en sidebar, hero o grid sin duplicar CSS.

El componente se adapta al hueco que ocupa, no al tamaño total de pantalla.

Si una tarjeta vive en una columna estrecha y luego en una principal, debería reaccionar a su propio ancho. Con media queries eso obliga a reglas más frágiles; con @container el componente se vuelve autónomo.

La idea clave es declarar un padre como contenedor y dejar que sus hijos consulten ese tamaño para cambiar layout, tipografía o densidad visual.

Responsive por componente, no por página.

Menos acoplamiento entre layout global y estilos internos.

Qué resuelven las Container Queries

El componente se adapta al hueco que ocupa, no al tamaño total de pantalla.

La idea clave es declarar un padre como contenedor y dejar que sus hijos consulten ese tamaño para cambiar layout, tipografía o densidad visual.

Responsive por componente, no por página.
Menos acoplamiento entre layout global y estilos internos.
Más reutilización en design systems.

Sintaxis base: container-type + @container

Primero defines el contenedor; después escribes reglas condicionales.

inline-size: evalúa ancho (caso más habitual).
size: evalúa ancho y alto (más estricto y menos usado).
container-name: útil para evitar ambigüedad en layouts complejos.

Unidades de contenedor (cqi, cqw, cqh, cqmin, cqmax)

Escalado fluido relativo al contenedor.

cqi y cqw representan porcentajes del ancho del contenedor, no del viewport. Esto permite que el texto de un widget escale en función del hueco real que tiene.

Combina estas unidades con clamp() para mantener límites de legibilidad.

CSS

Container Queries: componentes realmente responsivos

Aprende a adaptar un componente por el tamaño de su contenedor con @container, container-type y unidades cqi/cqw.

¿Cuánto sabes de CSS?

📘 Teoría

Qué resuelven las Container Queries

El componente se adapta al hueco que ocupa, no al tamaño total de pantalla.

La idea clave es declarar un padre como contenedor y dejar que sus hijos consulten ese tamaño para cambiar layout, tipografía o densidad visual.

Responsive por componente, no por página.
Menos acoplamiento entre layout global y estilos internos.
Más reutilización en design systems.

Sintaxis base: container-type + @container

Primero defines el contenedor; después escribes reglas condicionales.

inline-size: evalúa ancho (caso más habitual).
size: evalúa ancho y alto (más estricto y menos usado).
container-name: útil para evitar ambigüedad en layouts complejos.

Unidades de contenedor (cqi, cqw, cqh, cqmin, cqmax)

Escalado fluido relativo al contenedor.

cqi y cqw representan porcentajes del ancho del contenedor, no del viewport. Esto permite que el texto de un widget escale en función del hueco real que tiene.

Combina estas unidades con clamp() para mantener límites de legibilidad.

1 Qué resuelven las Container Queries 2 Sintaxis base: container-type + @container 3 Unidades de contenedor (cqi, cqw, cqh, cqmin, cqmax)