Container queries
A breakpoint reacts to the viewport; a container query reacts to the size of a component's own ancestor — the same card can stack in a narrow sidebar and sit side-by-side in a wide one, on the same page, at the same viewport width.
Setting up a container
An element only becomes a query target once something gives it container-type. There's no Sass helper for this half — it's one line, so just write it:
.card-slot {
container-type: inline-size;
// container-name: sidebar; // optional — scope a query to this one
}
inline-size (width, in a horizontal writing mode) is what you want almost always — querying both axes (size) forces the browser to know the element's height up front, which usually means giving it an explicit one.
Mixins
Once an ancestor has container-type, query it with the same shape as the above() / below() / between() viewport mixins:
| Mixin | Applies |
|---|---|
| container-above($min, $containerName?) | At and above $min. |
| container-below($max, $containerName?) | Below $max. |
| container-between($min, $max, $containerName?) | Between the two, inclusive of $min. |
$containerName matches the query to one specific named container (for when more than one ancestor has container-type) — leave it off to match the nearest one, named or not. Pixel args convert to rem at build time, so the query still scales with the user's root font size.
.card {
@include container-above(400px) { flex-direction: row; }
}
.card {
@include container-between(400px, 800px, "sidebar") { box-shadow: token(shadow-md); }
}
Live example
A profile card — the same component, the same markup, the same viewport width, only the width of its own wrapping container differs. Below 420px the photo overlaps the top of the card on a negative margin and everything stacks; at 420px and up, container-above(420px) switches it to a two-column layout with a bigger photo:
Narrow container (< 420px)
Wide container (≥ 420px)
The card's own CSS (.profile-card*) is a docs-only example component in pages/_docs.scss, not part of the framework — the point here is the container-type + container-above() pattern, not a new shipped class.
Overriding
There's nothing to configure — container-above() / -below() / -between() are build-time Sass mixins, not a runtime system with tokens or settings. Use them anywhere you'd use above() / below() / between(), once the target has container-type on an ancestor.