Las container queries permiten que un mismo componente cambie su diseño según el tamaño de su contenedor padre, no de la ventana. Aquí verás cómo aplicarlas a una tarjeta de producto que se distribuye de forma vertical u horizontal según el espacio disponible, usando la estrategia mobile first con min-width.

¿Qué problema resuelven las container queries en un componente?

Imagina que tienes la misma tarjeta de producto repetida tres veces dentro de contenedores de distinto ancho: 250px, 400px y 600px. Con CSS tradicional, las tres se ven idénticas y verticales. Con container queries, cada tarjeta lee el ancho de su contenedor y decide cómo acomodarse.

El HTML es exactamente el mismo en los tres casos: imagen, título, descripción y precio. Lo único que cambia es el ancho del contenedor padre. Esa es la magia que vas a aprovechar.

¿Qué es una container query? Es una regla CSS que aplica estilos según el tamaño del contenedor padre del elemento, no del viewport. Te permite construir componentes verdaderamente reutilizables.

¿Cómo se nombra un contenedor con container-name?

Para que una container query funcione, el contenedor debe declararse explícitamente. Aquí entra una propiedad nueva: container-name, que asigna un nombre personalizado al contenedor para referenciarlo después [01:42].

En la tarjeta declaras algo así:

css .producto-tarjeta { container-name: tarjeta; container-type: inline-size; }

Luego invocas la consulta con @container tarjeta (min-width: 350px). El nombre tarjeta conecta la regla con el contenedor correcto.

¿Por qué usar min-width y no max-width?

La estrategia cambia respecto a lo visto antes. Aquí trabajas de chico hacia grande: defines el comportamiento base (vertical) y vas agregando reglas conforme el contenedor crece. Es la lógica mobile first aplicada al componente.

• 350px mínimo: aplica a contenedores medianos y grandes, cambiando la distribución a horizontal.
• 500px mínimo: refina la versión grande con más espacio para la imagen y mejor distribución.
• Menos de 350px: la tarjeta pequeña conserva su diseño vertical original.

¿Cómo cambiar la distribución de flex column a row?

El primer cambio dentro del @container es la dirección del flex. La tarjeta original usa flex-direction: column, que la hace vertical. Dentro de la container query la cambias a row:

css @container tarjeta (min-width: 350px) { .producto-tarjeta { flex-direction: row; } .producto-tarjeta img { width: 40%; } }

Fíjate en un detalle clave: la imagen original tenía width: 100%, lo que tapaba todo el texto al ponerla en horizontal. Bajarla a 40% libera espacio para la información [04:12].

Con esto, la tarjeta mediana de 400px ya luce perfecta. Pero la grande de 600px tiene espacio de sobra, así que merece su propio ajuste.

¿Cómo afinar la versión grande con una segunda container query?

Para la tarjeta de 600px añades una segunda consulta a partir de 500px. Aquí reduces la imagen al 30% y ajustas su aspect-ratio para que ocupe mejor la altura disponible:

css @container tarjeta (min-width: 500px) { .producto-tarjeta img { width: 30%; aspect-ratio: 1 / 1.3; } }

El aspect-ratio controla la proporción entre ancho y alto. Pasar de 1.5 a 1.3 da una imagen más cuadrada, que combina mejor con el contenedor ancho [06:58].

¿Qué es aspect-ratio en CSS? Es una propiedad que fija la relación entre ancho y alto de un elemento. Por ejemplo, 1 / 1.3 significa que el alto es 1.3 veces el ancho.

¿Cómo distribuir el contenido interno con justify-content?

Al agrandar la imagen aparece un hueco vertical bajo el texto. Lo resuelves convirtiendo el product-info en un contenedor flex con dirección columna y justify-content: space-between:

css .product-info { display: flex; flex-direction: column; justify-content: space-between; }

Con space-between, el título queda arriba, el precio abajo y el espacio se reparte uniformemente. La tarjeta grande aprovecha cada píxel y se ve equilibrada.

¿Por qué importa que un mismo componente se comporte de tres formas?

Reutilizar el mismo HTML en tres contextos distintos sin duplicar código es uno de los grandes beneficios de las container queries. La tarjeta de producto:

• En 250px se mantiene vertical y compacta.
• En 400px pasa a horizontal con imagen al 40%.
• En 600px ajusta imagen al 30%, modifica el aspect-ratio y distribuye el texto con space-between.

Un solo componente, tres comportamientos, cero JavaScript. Eso es CSS moderno trabajando a tu favor.

¿Ya probaste aplicar container queries a tus propios componentes? Cuéntanos en los comentarios qué tarjeta o módulo de tu proyecto vas a refactorizar con esta técnica.