¿Alguna vez has terminado un componente CSS perfecto, una tarjeta, un bloque de autor, lo que sea... y has sentido ese pequeño escalofrío al pensar: «y ahora, a ver cómo se ve esto en el sidebar»?
Es un clásico. Lo diseñas para que se vea de lujo en el contenido principal, pero cuando lo metes en una columna más estrecha, todo se descuadra, el texto se apretuja, las imágenes se deforman... ¡un caos!
Y ahí empezaba la fiesta de las clases extra (.card--small), los selectores súper específicos y los dolores de cabeza.
Hay una forma mucho más inteligente y limpia de trabajar, y se llama container queries. Prepárate, porque cuando las pruebes, ya no querrás volver atrás.
Antes de la magia: el método de siempre con «media queries»
Para entender por qué las «container queries» son tan revolucionarias, recordemos rápidamente cómo hemos hecho el diseño adaptable hasta ahora. Usábamos (y seguimos usando) las media queries.
Una «media query» le pregunta al navegador: «Oye, ¿qué ancho tiene la pantalla del dispositivo?».
Imagina esta tarjeta de perfil:
/* Estilos base de la tarjeta */
.profile-card {
border: 1px solid #ddd;
padding: 1rem;
text-align: center;
}
/* Si la PANTALLA mide 768px o más, cambiamos el diseño */
@media (min-width: 768px) {
.profile-card {
display: flex;
text-align: left;
}
}
Lenguaje del código: PHP (php)El problema es que esta regla se aplica a todas las tarjetas a la vez, sin importar dónde estén. Si la pantalla es ancha, todas las tarjetas cambian, incluso la que has metido en ese «sidebar» de 300px que se queda hecho un desastre. La tarjeta no tiene ni idea de su propio contexto.
La revolución del diseño por componentes: hola, «container queries»
Aquí es donde la cosa se pone interesante. Las «container queries» invierten la lógica. En lugar de preguntar por el tamaño de la pantalla, preguntan: «Oye, ¿qué ancho tiene el contenedor que me envuelve?».
Esto permite que nuestros componentes sean como pequeños camaleones: se adaptan al entorno en el que los pongas. Son autónomos, reutilizables y mucho, mucho más inteligentes.
Vamos al lío: creando una tarjeta inteligente paso a paso
Basta de teoría. Vamos a crear juntos una tarjeta que cambie su diseño automáticamente. ¡Verás qué fácil!
Paso 1: Nuestro HTML, la base de todo
Primero, necesitamos la estructura HTML. Es importante tener un elemento que envuelva a nuestro componente. Este será nuestro futuro «contenedor vigilante».
<div class="card-wrapper">
<article class="smart-card">
<img src="tu-imagen.jpg" alt="Imagen de ejemplo">
<div class="card-content">
<h3>Un Título Genial</h3>
<p>Este es el texto de nuestra tarjeta inteligente que se adaptará como por arte de magia.</p>
</div>
</article>
</div>
Lenguaje del código: PHP (php)Paso 2: Convertimos un elemento en un «contenedor vigilante»
Ahora viene el primer toque de magia. Le decimos a CSS que card-wrapper debe empezar a vigilar su propio tamaño. Para ello, usamos la propiedad container-type.
.card-wrapper {
container-type: inline-size;
container-name: card-container; /* Un nombre para identificarlo, ¡muy útil! */
}
Lenguaje del código: PHP (php)container-type: inline-size;: Con esta línea, le decimos que nos interesa su tamaño en el eje horizontal (su ancho). ¡Ya lo tenemos vigilando!container-name: card-container;: Darle un nombre es opcional, pero es una práctica recomendada. Así, si tienes varios contenedores, puedes decirle a cada componente a cuál de ellos debe hacer caso.
Paso 3: ¡Lanzamos la consulta! La magia del @container
Ya tenemos el vigilante. Ahora solo falta darle las órdenes. Usaremos la regla @container que es muy parecida a @media, pero muchísimo más potente para los componentes.
/* Estilos base de la tarjeta (para cuando el contenedor es estrecho) */
.smart-card {
display: block; /* La imagen arriba, el texto abajo */
border: 1px solid #eee;
border-radius: 12px;
overflow: hidden; /* Para que los bordes redondeados se vean bien */
}
.smart-card img {
width: 100%;
height: auto;
}
.card-content {
padding: 1.5rem;
}
/* --- AQUÍ VIENE LA MAGIA --- */
/* SI el contenedor llamado "card-container" mide 450px o más... */
@container card-container (min-width: 450px) {
/* ...entonces, aplicamos estos estilos a la tarjeta que está DENTRO */
.smart-card {
display: flex; /* La imagen a un lado, el texto al otro */
align-items: center;
gap: 1rem;
}
.smart-card img {
width: 150px; /* Le damos un ancho fijo a la imagen */
}
}
Lenguaje del código: PHP (php)¡Y listo! Ya lo tienes. Ahora puedes poner ese bloque de HTML donde quieras. Si lo pones en un contenedor ancho, la tarjeta se verá en formato horizontal. Si lo arrastras a una columna estrecha, cambiará automáticamente a formato vertical. Sin tocar una línea de JavaScript ni añadir clases extra.
Entonces, ¿tiro las «media queries» a la basura?
¡Para nada! No son enemigas, son compañeras de equipo que juegan en posiciones diferentes.
- Usa
media queriespara el «macro-layout»: Para la estructura grande de tu web. Por ejemplo: «a partir de 1024px, quiero una cabecera, un contenido y un sidebar». - Usa
container queriespara el «micro-layout»: Para los componentes individuales. «Quiero que esta tarjeta tenga este aspecto cuando su contenedor le dé espacio suficiente».
Ambas herramientas conviven en perfecta armonía.
Un plus de potencia: las unidades cqw, cqi y compañía
Y por si todo esto fuera poco, las «container queries» traen bajo el brazo su propio juego de unidades de medida. Son como el superpoder secreto para que tus componentes no solo cambien su estructura, sino que también escalen sus estilos internos de forma fluida.
Piensa en ellas como una versión «mini» de vw (viewport width), pero en lugar de mirar el ancho total de la pantalla, estas nuevas unidades de medida en CSS moderno miran el tamaño de su contenedor padre.
cqw (container query width)
Esta es la más fácil de entender. 1cqw es exactamente el 1% del ancho (width) del contenedor.
Si un contenedor mide 800px de ancho, 10cqw serán 80px. Si se encoge a 500px, esos 10cqw se convierten automáticamente en 50px. Es así de simple.
cqi (container query inline-size)
Esta es la unidad estrella, la que probablemente más uses. 1cqi es el 1% del tamaño del contenedor en su «eje inline», es decir, en la dirección en la que fluye el texto.
Para nosotros, que escribimos en horizontal, el «eje inline» es el ancho. Así que, en la práctica, cqi casi siempre se comportará igual que cqw.
Entonces, ¿por qué usar cqi? Porque es más «lista» y está preparada para webs multi-idioma. Si tu web tuviera escritura vertical, cqi se adaptaría a la altura, mientras que cqw no. Usar cqi es simplemente más correcto y profesional.
El caso de uso más espectacular es para crear tipografías fluidas:
.smart-card h3 {
/* El tamaño de la fuente siempre será el 8% del ANCHO de su contenedor.
Si el contenedor se hace más grande, la fuente crece. ¡Magia! */
font-size: 8cqi;
}
Lenguaje del código: PHP (php)Mi recomendación: Acostúmbrate a usar cqi por defecto. Funciona para lo que necesitas y, de paso, estás escribiendo un CSS más semántico y robusto.
Conclusión: ahora te toca a ti crear componentes más listos
Como has visto, las «container queries» son un cambio de mentalidad que nos permite crear diseños más robustos, modulares y fáciles de mantener. Se acabaron los apaños y las reglas de CSS enrevesadas.
Es el momento de empezar a pensar en componentes que se cuidan solos, que son inteligentes y que se adaptan a cualquier rincón de tu web.
¿Qué te ha parecido? ¿Te ha explotado un poco la cabeza? ¡Espero que sí! Ahora te toca a ti.
Me encantaría que me contaras qué componente de tu web sería el primer candidato para recibir esta súper-actualización. ¡Te leo!
