Style elements by their container size, not the viewport. Component-driven responsive design.
/* Define a container (any element) */
.card-list {
container-type: inline-size;
container-name: card-list;
}
/* Query by container (not viewport) */
@container card-list (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
/* Shorthand */
.sidebar {
container: sidebar / inline-size;
}
/* Use cqw, cqh, cqi, cqb, cqmin, cqmax in the query */
@container (min-width: 30cqw) {
.title { font-size: 1.25rem; }
}On a parent, set container-type: inline-size (or size) and optionally container-name. Children can then be styled with @container.
Use @container [name] (min-width: ...) or @container (min-width: ...). Units cqw/cqh are relative to the container.
@container (min-width: 300px) { .item { flex: 1; } }