Container Queries vs Media Queries

El problema que las media queries nunca pudieron resolver

Llevamos más de una década usando media queries como único mecanismo de adaptación. Funcionan bien cuando el layout es simple: una columna que pasa a dos en tablet, un menú que colapsa en móvil. Pero en cuanto el diseño se complica —y siempre se complica—, empiezan a aparecer las grietas.

El caso clásico: 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í, porque la media query solo sabe que la pantalla mide 1280px; no sabe que tu componente, dentro de ese layout, solo tiene 320px disponibles.

Ese es el problema que las Container Queries resuelven de forma directa y sin rodeos.

Cómo funcionan las Container Queries en CSS

La sintaxis tiene dos partes. Primero, declaras el contenedor —el elemento padre que va a ser el punto de referencia. Segundo, escribes las reglas que se aplican a sus hijos en función de las dimensiones de ese contenedor.

El contenedor se define con la propiedad container-type. El valor inline-size es el más habitual: mide el ancho disponible en el eje inline (horizontal en la mayoría de idiomas). También puedes usar size si necesitas controlar alto y ancho, pero es el caso menos frecuente.

Una vez declarado el contenedor, la query se escribe con @container en lugar de @media. La lógica es idéntica.

Desde 2023, la compatibilidad con navegadores es sólida: Chrome, Firefox, Safari y Edge la soportan sin prefijos ni flags. En Can I Use la cobertura global supera el 90%. No es una tecnología experimental: puedes usarla en producción ahora.

¿Cuándo tiene sentido usarlas y cuándo no?

Las Container Queries no vienen a jubilar a las media queries. Cubren problemas distintos. Un breakpoint global que afecta al layout de toda la página —el header que se convierte en hamburger, la sidebar que se oculta— sigue siendo territorio de @media. El viewport es el contenedor correcto ahí.

Las Container Queries brillan cuando tienes componentes reutilizables que pueden aparecer en contextos distintos:

• Cards de producto en e-commerce: la misma card en el grid de resultados (300px) y en la página de detalle relacionados (200px) se adapta sola sin necesidad de clases modificadoras adicionales.
• Widgets en dashboards: un bloque de estadísticas que puede ocupar una columna completa o la mitad de otra se ajusta a lo que tiene disponible, no a lo que mide la pantalla.
• Componentes en sistemas de diseño: cualquier componente que se distribuya como «unidad independiente» (un sistema de diseño, un plugin, un bloque de WordPress) gana autonomía real. No depende de que quien lo use configure el CSS correcto alrededor.
• Layouts de artículos con sidebars variables: el área de contenido principal puede tener 900px o 580px dependiendo de si la sidebar está visible. Con Container Queries, el contenido lo gestiona él solo.

Lo que hay que tener claro antes de escribir la primera query

Hay un detalle que genera confusión al principio: un contenedor no puede consultarse a sí mismo. La query actúa sobre los hijos del contenedor declarado, nunca sobre el propio elemento. Si intentas aplicar reglas al mismo elemento que tiene container-type, no va a funcionar.

Otro punto a vigilar: declarar container-type: inline-size en un elemento crea un nuevo contexto de formato, similar a lo que hace overflow: hidden. En la mayoría de casos esto no supone ningún problema, pero conviene tenerlo en mente si estás trabajando con posicionamiento absoluto o z-index dentro del componente.

Por último, dale nombres a tus contenedores cuando tengas más de uno anidado. La propiedad container-name permite que una query apunte a un contenedor específico por nombre, evitando que se apliquen las reglas del primer ancestro que encuentre.

Ejemplo práctico: una card que se adapta a su contexto

Este es el patrón más habitual. Una card con imagen, título y descripción que pasa de layout apilado a layout horizontal cuando tiene suficiente espacio. Sin tocar nada del exterior.

/* 1. Declaramos el contenedor */
.card-wrapper {
  container-type: inline-size;
  container-name: card; /* nombre opcional pero recomendado */
}

/* 2. Estilos base de la card (mobile-first: layout apilado) */
.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

.card__body {
  padding: 0.5rem 0;
}

/* 3. Container Query: cuando el contenedor tiene 480px o más,
   la card pasa a layout horizontal */
@container card (min-width: 480px) {
  .card {
    grid-template-columns: 200px 1fr;
    align-items: start;
  }

  .card__image {
    aspect-ratio: 1 / 1; /* cuadrada en modo horizontal */
  }
}

/* 4. Y si el contenedor es grande, podemos añadir más detalle */
@container card (min-width: 700px) {
  .card__body {
    padding: 1rem;
  }

  .card__title {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
  }
}

Lo que hace que este ejemplo sea útil en producción: puedes meter .card-wrapper en una sidebar estrecha y en un grid de contenido ancho, y la card se adapta sola en los dos casos. Cero clases adicionales, cero JavaScript.

Descarga ejemplo Container vs Media (.html)

Container Queries de unidades: el siguiente nivel

Más allá de las queries condicionales, CSS también ofrece Container Query Units: unidades relativas al contenedor en lugar del viewport. cqw equivale al 1% del ancho del contenedor, igual que vw lo hace respecto al viewport.

Esto abre posibilidades interesantes para la tipografía. En lugar de usar clamp() con vw, puedes escalar el texto en función del espacio real del componente. Una headline que ocupa el 8% del ancho de su contenedor siempre va a quedar proporcionada, independientemente de dónde esté ese contenedor:

.card__title {
  /* La fuente escala con el ancho del contenedor, no del viewport */
  font-size: clamp(1rem, 5cqw, 2rem);
}

Las unidades disponibles son cqw, cqh, cqi (inline), cqb (block), cqmin y cqmax. La compatibilidad sigue a la de Container Queries: amplia y sin necesidad de prefijos.

Herramientas y recursos

La documentación de referencia está en MDN — CSS Container Queries, que incluye la especificación completa con ejemplos y compatibilidad detallada. Para una introducción más visual y orientada a casos de uso, web.dev tiene un artículo dedicado que cubre también Style Queries —la siguiente expansión de la spec, que permite hacer queries basadas en propiedades CSS personalizadas, no solo en dimensiones.

Si quieres explorar los límites en tiempo real, el playground de CodePen es suficiente; no necesitas ninguna herramienta especial porque el soporte nativo ya está en todos los DevTools principales.