Diseñando layouts modulares con CSS Container Queries

Thu, 10 Jul 2025 00:00:00 +0900

Introducción

Las Media Queries (@media) cambian estilos según el viewport. CSS Container Queries (@container) permiten estilar componentes según el ancho de su contenedor padre, ideal para componentes reutilizables.

Viewport vs Container

Media queries dependen del ancho de la ventana. Container queries dependen del contenedor padre inmediato, permitiendo que un mismo componente se adapte a diferentes contextos.

Configuración básica

Registrar el padre con container-type: inline-size 2. Escribir reglas con @container (min-width: 400px)

.card-wrapper { container-type: inline-size; }
@container (min-width: 400px) { .my-card { flex-direction: row; } }

Unidades de container query

cqw (1% del ancho), cqh (1% del alto), cqmin, cqmax. Útiles para tipografía dinámica: font-size: clamp(1rem, 5cqw, 2rem).

Responsive on Commentary of Takao

Diseñando layouts modulares con CSS Container Queries

Introducción

Viewport vs Container

Configuración básica

Unidades de container query