Cuando las CSS Container Queries aparecieron en escena, muchos desarrolladores, incluido yo mismo, nos preguntamos: ¿para qué necesitamos esto si ya existen las media queries? La respuesta, aunque no fue inmediata, se vuelve clara al entender que container queries no son un sustitutivo directo, sino una evolución en la forma de diseñar interfaces adaptativas.
Aunque esta funcionalidad lleva ya un tiempo disponible —con un soporte del 94 % en los principales navegadores según Can I Use— su adopción sigue siendo deficiente. Según la encuesta State of CSS 2025, el 86 % de los desarrolladores está familiarizado con container queries, pero solo un 41,4 % las emplea realmente en sus proyectos. Este dato evidencia una brecha entre conocimiento y aplicación práctica.
En la SmashingConf Ámsterdam 2026, Kevin Powell destacó esta baja adopción, enfatizando lo sorprendente que es dado que la capacidad de adaptar componentes según el tamaño de su contenedor siempre ha estado en lo más alto de las peticiones de la comunidad CSS.
El principal problema no es cuántos desarrollan las usan, sino cómo se usan: muchas veces de forma incorrecta porque tienden a interpretarlas como media queries clásicas. Esta confusión es natural, pues superficialmente parecen muy similares, pero sus principios y aplicaciones son distintos.
Nota: este análisis se centra en las container size queries, que responden al tamaño del contenedor, como técnica principal de diseño responsivo. Existen también container style queries que reaccionan a estilos computados del contenedor, aunque a día de hoy aún están en fase experimental y se exploran sus posibles usos.
More Read
Media Queries: una visión desde el exterior
Las media queries funcionan consultando el tamaño del viewport o ventana gráfica, que es el elemento externo que determina cuándo se aplican los estilos adaptativos. Por ejemplo:
@media (min-width: 1024px) {
.card {
display: flex;
}
}
En este caso, la pregunta que hacemos al navegador es: ¿qué ancho tiene la pantalla o ventana? Si el viewport mide al menos 1024px, el estilo cambia. Esto funciona bien para adaptar diseños globales, como pasar de dos columnas a una en función del ancho de la pantalla.
Sin embargo, cuando un componente como .card se sitúa dentro de un contenedor más pequeño, como una celda de 300px en un grid dentro de un monitor de 1920px, esta consulta sigue activándose porque el viewport es ancho, aunque el espacio disponible para el componente es estrecho. Esto provoca que el contenido se deforme o desborde.
More Read
“Las media queries son limitadas, no porque la idea sea mala, sino porque realmente no saben tanto como creemos.” — Kevin Powell
Container Queries: adaptabilidad desde el interior
Las container queries superan esta limitación al centrarse en el contenedor directo del componente, evaluando el espacio disponible en ese punto específico. En lugar de preguntar por el tamaño total de la pantalla, preguntan: ¿cuánto espacio tiene aquí este componente?.
Veamos el mismo ejemplo con container queries:
.card-wrapper {
container-name: card;
container-type: inline-size;
}
@container card (min-width: 450px) {
.card {
display: flex;
flex-direction: row;
}
}
Con este código, el componente .card solo cambia su diseño si su contenedor padre tiene al menos 450px de ancho. Así, el componente se vuelve más flexible y autónomo, adaptándose a su contexto inmediato y no condicionándose únicamente por el tamaño total de la pantalla.
El comportamiento en un layout flexible puede resumirse así:
- Cuando hay espacio suficiente, los elementos hijos se disponen lado a lado dividiendo el contenedor padre en partes iguales.
- Si el espacio se reduce, los elementos “envuelven” a la siguiente línea.
- Los elementos flexibles aumentan para llenar el espacio disponible gracias al uso del
flex-grow. - Si un elemento es contenedor a su vez, detecta el cambio en su tamaño y activa las consultas correspondientes.
/* Contenedor flexible */
.flex-layout {
display: flex;
flex-wrap: wrap;
}
/* Elementos flexibles que actúan como contenedores */
.flex-item {
container-type: inline-size;
flex: 1 1 390px; /* Crece para llenar espacio y envuelve a 390px */
}
/* Estilos por defecto para .card (vertical) */
.card {
display: flex;
flex-direction: column;
background: #f4f4f4;
}
/* Cambia a horizontal si hay espacio */
@container (min-width: 600px) {
.card {
flex-direction: row;
align-items: center;
background: #e2f0d9;
}
}
Este enfoque mejora la reutilización de componentes, ya que cada uno puede adaptarse dependiendo del tamaño de su contenedor específico, sin depender del contexto global.
En definitiva, la semejanza visual con las media queries explica muchas confusiones y el escaso uso efectivo. Sin embargo, container queries llenan un vacío importante en el ecosistema CSS, al permitir que los componentes detecten y respondan a cambios en su propio ámbito, haciendo el diseño web verdaderamente modular y adaptativo.
