Los container queries en CSS permiten que un componente cambie su diseño según el tamaño de su contenedor padre, no del viewport. Esta funcionalidad, disponible desde 2022, transforma la manera de construir responsive design y resulta especialmente útil para quienes trabajan con design systems y componentes reutilizables.

¿En qué se diferencian los container queries de los media queries?

Durante años, el responsive design se apoyó en media queries, que ajustan estilos según el tamaño del viewport. El problema es que no todo en la web debería depender de la ventana del navegador.

Imagina una card con imagen y texto que aparece en dos lugares: un menú lateral angosto y un contenedor principal amplio. Con media queries, ambas se verán igual porque solo reaccionan al viewport. Con container queries, cada card adapta su forma al ancho de su propio contenedor padre.

¿Qué es un container query? Es una regla de CSS que aplica estilos a un componente según el tamaño de su contenedor padre, no del viewport. Permite que un mismo componente luzca distinto en diferentes zonas de la página.

¿Cómo se escribe un container query en CSS?

La sintaxis se parece a la de media queries, pero requiere un paso previo: declarar el contenedor.

Primero, defines el padre con la propiedad container-type y el valor inline-size. Esto le indica al navegador que ese elemento será la referencia de medida.

css .wrapper { container-type: inline-size; container-name: card; }

Luego, en lugar de usar @media, escribes @container y defines el ancho mínimo a partir del cual cambian los estilos del componente hijo.

css @container card (min-width: 400px) { .card { display: flex; } }

¿Para qué sirve container-name?

Cuando trabajas con varios contenedores en la misma página, container-name te permite asignar un identificador a cada uno. Así, en la consulta @container card (...) el navegador sabe exactamente a qué padre debe observar para aplicar los estilos.

¿Cuándo conviene usar container queries en lugar de media queries? Cuando un componente debe adaptarse a su contexto inmediato y no al tamaño de la pantalla. Por ejemplo, una card que aparece tanto en un sidebar estrecho como en un grid amplio.

¿Por qué los container queries cambian la forma de construir design systems?

Un design system vive de la reutilización. Una misma card puede aparecer en un menú lateral, en un grid principal o dentro de un modal, y cada contexto pide proporciones distintas.

Antes, la solución obligaba a duplicar componentes o a llenar el CSS de excepciones. Con container queries, un solo componente reacciona automáticamente al espacio que tiene disponible. Y aquí viene lo interesante: el componente ya no necesita saber dónde vive, solo cuánto espacio tiene.

¿Cómo experimentar con container queries antes de usarlos en producción?

Existe un lab interactivo, similar al de Jen Simmons, donde puedes probar distintos componentes y hacer resize del contenedor para ver cómo se transforman en tiempo real.

Algunos ejemplos útiles para practicar son:

• Una card con imagen y texto que cambia de columna a fila según el ancho del padre.
• Un componente article con thumb, título y descripción que se reorganiza al redimensionar su wrapper.
• Un sidebar con tarjetas verticales y un contenedor principal con la misma tarjeta en horizontal.

Después de probar varios casos, vas a notar que el cambio ocurre solo al mover el contenedor, sin tocar el tamaño de la ventana. Esa es la magia.

¿Los container queries ya son compatibles con los navegadores?

La compatibilidad ronda el 76% según Can I Use, una cifra sólida para uso en producción. Chrome, Firefox y Safari ya soportan container queries en sus versiones recientes.

Algunos esperaban un 90%, pero el soporte actual cubre la mayoría de los escenarios reales. Antes de implementarlos en un proyecto crítico, revisa siempre Can I Use con la versión específica de los navegadores de tu audiencia.

¿Ya habías escuchado sobre container queries? Cuéntame en los comentarios si exploraste el lab interactivo, qué tal te fue al revisar la compatibilidad en Can I Use y en qué componente de tu design system los aplicarías primero.