Las container queries en CSS te permiten aplicar estilos según el ancho de un contenedor y no del viewport, lo que cambia por completo la forma de pensar el diseño responsive en componentes como tarjetas, cards o módulos reutilizables. Si trabajas con interfaces basadas en componentes, esta técnica te da control fino sobre cómo se adapta cada pieza de tu aplicación.

¿Qué diferencia hay entre container queries y media queries?

La diferencia clave está en qué se mide. Las media queries observan el ancho del viewport, es decir, la ventana del navegador completa. Las container queries, en cambio, observan el ancho del contenedor específico donde vive el elemento.

¿Qué son las container queries? Son reglas CSS que aplican estilos según el tamaño de un contenedor padre, no del viewport. Esto permite que un mismo componente se vea distinto dependiendo del espacio que tenga disponible.

Imagina tres tarjetas de producto en un grid. Con media queries, todas cambian al mismo tiempo cuando achicas la ventana. Con container queries, cada tarjeta decide por sí misma cómo verse según el espacio que tiene asignado dentro del grid.

¿Cómo se configura un contenedor con container-type?

Para que una container query funcione, primero necesitas declarar qué elemento será el contenedor de referencia. Esto se hace con la propiedad container-type dentro de la clase que quieres convertir en contenedor.

En el ejemplo, cada tarjeta del grid se configura así:

css .tarjeta { container-type: inline-size; background: white; border-radius: 8px; }

El valor inline-size indica que las consultas se harán sobre el ancho del contenedor. Sin esta declaración, la regla @container no tiene sobre qué actuar.

¿Por qué usar inline-size?

Porque en la mayoría de diseños responsive lo que cambia es el ancho disponible. Usar inline-size es más eficiente que medir ambas dimensiones y suele ser suficiente para decisiones de layout.

¿Cómo escribir una regla @container paso a paso?

Una vez declarado el contenedor, escribes la consulta con @container seguido de la condición y las reglas que se aplicarán cuando se cumpla. La sintaxis se parece a una media query, pero apunta al contenedor.

Primer punto de quiebre a 220 píxeles, donde se oculta el párrafo y se reduce el título:

css @container (max-width: 220px) { .tarjeta p { display: none; } .tarjeta h3 { font-size: 1rem; } }

Segundo punto de quiebre a 180 píxeles, donde además se oculta el botón:

css @container (max-width: 180px) { .tarjeta .boton { display: none; } }

Fíjate en el detalle: el tamaño del título usa la unidad rem, una medida dinámica relativa a la raíz del documento, lo que mantiene la coherencia tipográfica del resto de la interfaz.

¿Cuándo se activa una container query? Se activa cuando el contenedor cumple la condición de tamaño, sin importar el ancho de la ventana. Si el contenedor crece o se reordena en el grid, los estilos vuelven a recalcularse.

¿Cómo se comporta el grid junto a las container queries?

El contenedor general usa display: grid con auto-fit y minmax(200px, 1fr), lo que permite que las tarjetas se reorganicen automáticamente según el espacio disponible.

Cuando el ancho de la ventana se reduce, ocurre algo interesante:

• Las tarjetas se hacen más angostas y, al cruzar los 220 px, ocultan el párrafo y reducen el título.
• Si siguen achicándose y bajan de 180 px, también desaparece el botón.
• Cuando el grid manda una tarjeta a una nueva fila y vuelve a tener espacio, la tarjeta recupera todos sus elementos.

Este último punto es el que hace tan poderosas a las container queries: el componente reacciona a su contexto real, no a una medida global. Una misma tarjeta puede verse completa en una fila y compacta en otra, dentro de la misma vista.

¿Puedo combinar container queries y media queries?

Sí, y muchas veces es la mejor estrategia. Puedes usar media queries para cambios globales de layout (como pasar de una sidebar a un menú móvil) y container queries para que cada componente se adapte a su espacio. No compiten, se complementan.

¿Qué casos de uso tienen las container queries en componentes?

Más allá del ejemplo de las tarjetas con imagen, título, descripción y botón, puedes aplicar esta técnica a cualquier componente reutilizable que viva en distintos contextos.

Algunos escenarios donde brillan:

• Tarjetas de producto que aparecen en grids, sidebars o modales con distintos anchos.
• Widgets de dashboard que cambian su densidad de información según el panel.
• Componentes de comentarios o perfiles que se muestran en listas anchas o columnas estrechas.
• Cards de artículos que conviven en una home y en una vista de detalle.

La lógica es siempre la misma: declarar container-type: inline-size en el componente y usar @container con los puntos de quiebre que tengan sentido para ese diseño concreto.

Si vienes trabajando solo con media queries, prueba reescribir uno de tus componentes con container queries y compara cómo se siente la experiencia. ¿En qué parte de tu proyecto crees que tendrían más impacto? Cuéntalo en los comentarios.