Cambiar la disposición por componente con container queries

En esta lección harás que un componente decida su disposición según el ancho de su contenedor, no del de la pantalla.

Primero se marca el contenedor con container-type: inline-size, y a partir de ahí @container (min-width: 400px) funciona igual que una media query pero midiendo ese contenedor. La diferencia es fundamental: el mismo componente puede apilarse en una barra lateral estrecha y ponerse en horizontal en la zona principal, con una sola definición.

En el código de ejemplo, el contenedor mide 250px, así que la tarjeta se muestra en vertical. Súbelo a 400px o más y pasará a horizontal, aunque la pantalla no haya cambiado de tamaño.

El olvido más frecuente es no declarar container-type en el padre: sin eso, la regla @container nunca se cumple y parece que la sintaxis está mal.

Es una de las incorporaciones recientes más celebradas del CSS, porque encaja con la forma moderna de trabajar por componentes reutilizables. Ya funciona en todos los navegadores principales.