CSS Container Queries: diseño responsive basado en el contenedor, no en la pantalla

Durante años, el diseño responsive en CSS casi siempre ha significado reaccionar al ancho de la ventana del navegador mediante media queries. Esto funciona bien para el diseño general de una página, pero muestra sus límites al construir componentes reutilizables: una tarjeta, un widget de barra lateral, cualquier elemento que deba adaptarse al espacio real disponible, no a la pantalla del usuario. Las CSS Container Queries resuelven precisamente este problema y, en 2026, son ya una tecnología madura, compatible con todos los navegadores modernos principales.

Este artículo explica qué son, cómo usarlas en la práctica y en qué casos conviven con las media queries en lugar de sustituirlas.

Qué son las container queries y por qué son útiles

Una container query aplica reglas CSS a un elemento según el tamaño (o el estilo) de su elemento contenedor, en lugar del viewport. En la práctica: si colocas la misma tarjeta en una columna ancha y en una barra lateral estrecha, puede cambiar automáticamente de diseño, tamaño de texto o disposición de su contenido según el espacio real disponible a su alrededor, con independencia del ancho total de la pantalla.

Esto es lo que hace posible un verdadero diseño a nivel de componente: el mismo bloque HTML/CSS puede reutilizarse en distintos puntos de un sitio y se comportará de forma inteligente allí donde se coloque.

Activar un contenedor: container-type y container-name

Para que un elemento pueda ser "consultado" por sus hijos, primero debe declararse como contenedor de consulta mediante la propiedad container-type:

• inline-size: el caso más habitual, permite consultas basadas únicamente en la dimensión en línea del contenedor (normalmente su ancho).
• size: activa consultas tanto de ancho como de alto, pero requiere que la altura del contenedor esté definida explícitamente, o el contenido puede colapsar.
• normal: valor predeterminado; el elemento no es un contenedor de consulta de tamaño, pero puede seguir usándose para consultas basadas solo en el nombre o en el estilo.

Un ejemplo mínimo:

.post {
  container-type: inline-size;
}

Cuando una página tiene varios contenedores anidados, conviene distinguirlos con container-name, para que las reglas posteriores sepan a qué contenedor se refieren:

.post {
  container-type: inline-size;
  container-name: articulo;
}

Ambas propiedades también pueden escribirse de forma abreviada con la sintaxis container: nombre / tipo;, por ejemplo container: articulo / inline-size;.

La sintaxis @container en la práctica

Una vez definido el contenedor, las reglas se escriben con la regla at @container, cuya forma recuerda mucho a @media:

@container (width > 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Para apuntar a un contenedor específico entre varios anidados, se añade su nombre antes de la condición:

@container articulo (width > 700px) {
  .card { font-size: 2em; }
}

Un caso práctico frecuente es una tarjeta que apila título e imagen cuando el espacio es reducido (por ejemplo, en una barra lateral) y los coloca uno junto al otro cuando el contenedor es más ancho (por ejemplo, en la columna principal de una página): el mismo marcado HTML cambia de comportamiento automáticamente, sin necesidad de clases adicionales ni de JavaScript.

Las unidades de longitud relativas al contenedor

Cuando un elemento es un contenedor de tipo size o inline-size, quedan disponibles unidades de longitud dedicadas, pensadas para dimensionar fuentes, espaciados o elementos en proporción al contenedor en lugar de al viewport:

• cqw: el 1 % del ancho del contenedor.
• cqh: el 1 % de la altura del contenedor.
• cqi: el 1 % de la dimensión en línea del contenedor (normalmente el ancho, en escritura horizontal).
• cqb: el 1 % de la dimensión de bloque del contenedor (normalmente la altura).
• cqmin: el valor menor entre cqi y cqb.
• cqmax: el valor mayor entre cqi y cqb.

Un ejemplo típico es un título que crece de forma fluida en proporción al espacio disponible, combinando las unidades cq con clamp() o max():

.card h2 {
  font-size: max(1.5em, 1.23em + 2cqi);
}

Si un elemento no tiene un contenedor ancestro válido, estas unidades recurren por seguridad a las unidades equivalentes del viewport, evitando que el diseño se rompa.

Las container style queries: un paso más allá del tamaño

Junto a las consultas de tamaño, la especificación introduce también las container style queries, que permiten aplicar reglas según el estilo del contenedor (por ejemplo, el valor de una propiedad personalizada de CSS), no solo sus dimensiones: @container style(--tema: oscuro) { ... }. Se trata de una funcionalidad más reciente que, a diferencia de las consultas de tamaño ya estables en todas partes, todavía tiene soporte parcial: totalmente disponible en Firefox, y solo parcialmente en Chrome, Edge y Safari. Para un uso en producción hoy en día, conviene por tanto limitarse a las consultas de tamaño y tratar las style queries como una técnica emergente que conviene probar con cuidado.

Soporte de navegadores en 2026

Las container queries basadas en tamaño (mediante container-type: size o inline-size) se consideran ya una tecnología sólida y consolidada: compatibles con Chrome y Edge desde la versión 106, con Safari desde la versión 16 y con Firefox desde la versión 110, además de sus respectivas versiones móviles (Safari en iOS, Chrome para Android, Samsung Internet, Firefox para Android). El soporte global supera hoy el 94 % de los usuarios, faltando solo en navegadores heredados o de nicho como Internet Explorer, Opera Mini o algunos navegadores Android regionales (UC Browser, QQ Browser, Baidu Browser). Para la mayoría de los proyectos web modernos, las container queries basadas en tamaño pueden usarse sin mayores precauciones, previendo opcionalmente un respaldo mediante flexbox o grid para el público restante en navegadores muy antiguos.

Container queries o media queries: cuándo usar cada una

Las dos técnicas no compiten entre sí, sino que responden a necesidades distintas:

• Las media queries siguen siendo la opción adecuada para el diseño general de la página: número de columnas, visibilidad de un menú, comportamiento de toda la cuadrícula según el viewport.
• Las container queries son la opción adecuada para componentes individuales que deben ser reutilizables y "conscientes" del espacio en el que se colocan: tarjetas, widgets, bloques de un design system, elementos de una barra lateral.

En proyectos reales, ambas técnicas conviven sin problemas: las media queries definen la estructura general de la página, mientras que las container queries afinan el comportamiento de los componentes que contiene. Este cambio de perspectiva resulta especialmente útil para equipos que trabajan con design systems y librerías de componentes, donde el mismo bloque de interfaz debe funcionar bien dondequiera que se coloque.

Conclusión

Las CSS Container Queries llenan un vacío histórico del CSS responsive: la posibilidad de que un componente razone según su propio espacio real, no solo según la ventana del navegador. Con un soporte de navegadores ya sólido para las consultas de tamaño, es un buen momento para empezar a introducirlas en tus proyectos, quizá comenzando por un único componente (una tarjeta, un cuadro informativo) antes de extender el enfoque a todo un design system. Las style queries, aún en fase de adopción, merecen seguirse de cerca en un futuro próximo.

Fuentes oficiales

• MDN Web Docs – CSS container queries
• MDN Web Docs – Using container size and style queries
• Can I use – CSS Container Queries (Size)
• Can I use – CSS Container Style Queries