Container queries de CSS: estilar un componente por su contenedor, no por la ventana

Las container queries permiten que un elemento reaccione al tamaño de su contenedor padre en lugar del tamaño de toda la ventana. Esa es la pieza que faltaba para hacer un componente realmente reutilizable: la misma tarjeta puede maquetarse de una forma en una barra lateral estrecha y de otra en una columna principal ancha — en la misma página, con el mismo ancho de pantalla.

Por qué las media queries no bastaban

Una media query hace una sola pregunta: ¿qué ancho tiene la ventana? Pero un componente no sabe el ancho de la ventana — sabe el espacio que le dieron. Una tarjeta colocada en una barra lateral de 300 px y la misma tarjeta en una celda de cuadrícula de 900 px necesitan maquetaciones distintas, aunque el ancho de la ventana sea idéntico. Las container queries resuelven justo esto.

Paso 1: declarar un contexto de contención

Se consulta un contenedor, así que primero hay que marcar un elemento como contenedor con container-type:

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

inline-size significa «déjame consultar la dimensión en línea (normalmente horizontal)» — la opción más común. size consulta ambas dimensiones y normal desactiva la contención.

Paso 2: consultarlo con @container

Ahora cualquier descendiente de .card-wrapper puede adaptarse según el ancho del wrapper:

.card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 150px 1fr;
  }
}

Cuando el wrapper mide al menos 400 px de ancho, la tarjeta pasa a una maquetación de dos columnas. Coloca ese mismo marcado en cualquier parte de la página y se adapta al lugar donde aterriza — sin ninguna media query a nivel de página.

Nombrar los contenedores

Cuando hay contenedores anidados, nómbralos con container-name para que una consulta apunte al correcto:

.layout { container: layout / inline-size; } /* nombre / tipo, forma corta */

@container layout (min-width: 600px) {
  .card { /* responde a .layout, no a un contenedor más cercano */ }
}

Unidades de container query

Las container queries también desbloquean unidades relativas al contenedor en vez de a la ventana: cqw (1 % del ancho del contenedor), cqh, cqi (en línea) y cqb (de bloque). Una tipografía fluida que escala con su contenedor cabe en una línea:

.card h2 {
  font-size: clamp(1rem, 5cqi, 2rem);
}

Container queries vs media queries

	Media query	Container query
Mide	Ventana / dispositivo	Ancestro dimensionado más cercano
Preparación	Ninguna	container-type en un padre
Ideal para	Maquetación de la página	Componentes reutilizables
Unidades	vw, vh	cqw, cqi, ...

Soporte de navegadores

Las container queries de tamaño están soportadas en las versiones actuales de Chrome, Edge, Firefox y Safari. No sustituyen a las media queries — usa media queries para la estructura global de la página y container queries para los componentes que deben ser portables. Las dos funcionan bien juntas.

El cambio de mentalidad es pequeño pero potente: deja de preguntar «¿qué tamaño tiene la pantalla?» y empieza a preguntar «¿cuánto espacio tiene este componente?». Ese único cambio hace que los componentes de un design system sean realmente reutilizables en cualquier sitio.