🎨
CSS
Container Query
Me adapto al espacio que tengo, no a la pantalla.
La misma card. El mismo HTML. Dos técnicas distintas.
Arrastra el slider para cambiar el ancho de los contenedores y ver cómo reacciona cada una.
· gloobs.com
El componente consulta su propio contenedor. No importa el tamaño del viewport: si cabe, cambia de layout. Reutilizable en cualquier contexto.
El componente consulta el viewport. Si la pantalla supera 768px, aplica el layout horizontal, aunque el contenedor solo tenga 200px disponibles.
Me adapto al espacio que tengo, no a la pantalla.
Yo miro el viewport, no el espacio que me dan.
/* 1. Declarar el contenedor */
.cq-wrapper {
container-type: inline-size;
container-name: card-cq;
}
/* 2. Query sobre el CONTENEDOR */
@container card-cq (min-width: 320px) {
.card {
grid-template-columns: 120px 1fr;
}
}
/* Fuente relativa al contenedor */
.card__title {
font-size: clamp(.85rem, 5cqw, 1.1rem);
}/* No hay contenedor que declarar */
/* Query sobre el VIEWPORT */
@media (min-width: 768px) {
.card {
grid-template-columns: 120px 1fr;
}
}
/* Fuente fija, no sabe su contexto */
.card__title {
font-size: 0.95rem;
}