{"id":1379,"date":"2026-06-18T14:15:54","date_gmt":"2026-06-18T14:15:54","guid":{"rendered":"https:\/\/www.gloobs.com\/blog\/?p=1379"},"modified":"2026-06-25T07:56:32","modified_gmt":"2026-06-25T07:56:32","slug":"container-queries-css-responsive-real","status":"publish","type":"post","link":"https:\/\/www.gloobs.com\/blog\/container-queries-css-responsive-real\/","title":{"rendered":"Container Queries vs Media Queries"},"content":{"rendered":"
\n
\n

Container Queries vs Media Queries<\/h1>\n

Las Container Queries<\/strong> a diferencia de las Media Queries, permiten que un componente CSS reaccione al tama\u00f1o de su propio contenedor, no al de la ventana del navegador. Esto cambia la l\u00f3gica del responsive design desde la ra\u00edz: en lugar de preguntarle al viewport, el componente se pregunta a s\u00ed mismo cu\u00e1nto espacio tiene disponible.<\/p>\n<\/header>\n

\n

El problema que las media queries nunca pudieron resolver<\/h2>\n

Llevamos m\u00e1s de una d\u00e9cada usando media queries como \u00fanico mecanismo de adaptaci\u00f3n. Funcionan bien cuando el layout es simple: una columna que pasa a dos en tablet, un men\u00fa que colapsa en m\u00f3vil. Pero en cuanto el dise\u00f1o se complica \u2014y siempre se complica\u2014, empiezan a aparecer las grietas.<\/p>\n

El caso cl\u00e1sico: tienes una tarjeta de producto que funciona perfectamente sola. La metes en una sidebar y rompe. La reutilizas en un grid de tres columnas y vuelve a romper. La media query no puede ayudarte ah\u00ed, porque la media query solo sabe que la pantalla mide 1280px; no sabe que tu componente, dentro de ese layout, solo tiene 320px disponibles.<\/p>\n

Ese es el problema que las Container Queries resuelven de forma directa y sin rodeos.<\/p>\n<\/section>\n

\n

C\u00f3mo funcionan las Container Queries en CSS<\/h2>\n

La sintaxis tiene dos partes. Primero, declaras el contenedor<\/strong> \u2014el elemento padre que va a ser el punto de referencia. Segundo, escribes las reglas que se aplican a sus hijos<\/strong> en funci\u00f3n de las dimensiones de ese contenedor.<\/p>\n

El contenedor se define con la propiedad container-type<\/code>. El valor inline-size<\/code> es el m\u00e1s habitual: mide el ancho disponible en el eje inline (horizontal en la mayor\u00eda de idiomas). Tambi\u00e9n puedes usar size<\/code> si necesitas controlar alto y ancho, pero es el caso menos frecuente.<\/p>\n

Una vez declarado el contenedor, la query se escribe con @container<\/code> en lugar de @media<\/code>. La l\u00f3gica es id\u00e9ntica.<\/strong><\/p>\n

Desde 2023, la compatibilidad con navegadores es s\u00f3lida: Chrome, Firefox, Safari y Edge la soportan sin prefijos ni flags. En Can I Use<\/a> la cobertura global supera el 90%. No es una tecnolog\u00eda experimental: puedes usarla en producci\u00f3n ahora.<\/p>\n<\/section>\n

\n

\u00bfCu\u00e1ndo tiene sentido usarlas y cu\u00e1ndo no?<\/h2>\n

Las Container Queries no vienen a jubilar a las media queries.<\/strong> Cubren problemas distintos. Un breakpoint global que afecta al layout de toda la p\u00e1gina \u2014el header que se convierte en hamburger, la sidebar que se oculta\u2014 sigue siendo territorio de @media<\/code>. El viewport es el contenedor correcto ah\u00ed.<\/p>\n

Las Container Queries brillan cuando tienes componentes reutilizables que pueden aparecer en contextos distintos:<\/p>\n