The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Create an inline-size container | .card-shell { container-type: inline-size; } | View examples |
| Name a container | .sidebar { container: sidebar / inline-size; } | View examples |
| Query container width | @container (width >= 36rem) {
.card { grid-template-columns: 1fr 2fr; };
} | View examples |
| Query a named container | @container sidebar (width > 24rem) {
.nav { display: flex; };
} | View examples |
| Use a bounded range | @container (20rem <= width < 40rem) {
.card { gap: 1rem; };
} | View examples |
| Use inline container units | .title { font-size: clamp(1rem, 5cqi, 2rem); } | View examples |
| Use smaller container axis | .art { border-radius: 4cqmin; } | View examples |
| Query a custom property | @container style(--theme: dark) {
.card { color: white; };
} | View examples |
| Contain layout effects | .widget { contain: layout paint; } | View examples |
| Skip off-screen rendering | .feed-item {
content-visibility: auto;
contain-intrinsic-size: auto 20rem;
} | View examples |
Media queries respond to the viewport or device; container queries let a component respond to its available context. Establish only the containment needed, query a meaningful ancestor, and keep a usable base layout for environments or sizes that do not match the enhancement.
Step by step
Detailed examples
Establish a queryable ancestor
container-type:inline-size applies size containment in the inline axis and is sufficient for most responsive components. size contains both axes and can collapse an auto-sized element unless another size is supplied. container-name makes nested lookup explicit and reduces accidental dependency on the nearest eligible ancestor.
.card-region { container: cards / inline-size; }
.card { display: grid; gap: 1rem; }
@container cards (width >= 42rem) { .card { grid-template-columns: 12rem 1fr; } }Query available component space
Size features refer to the selected query container, not the component itself. Range syntax keeps breakpoints readable. Choose breakpoints where content stops working rather than copying viewport device sizes, and ensure the base style works below every threshold.
.card-shell { container-type: inline-size; }
.card { display: grid; }
@container (width >= 30rem) { .card { grid-template-columns: 10rem 1fr; } }
@container (width >= 50rem) { .card { grid-template-columns: 14rem 1fr auto; } }Scale values with the query container
cqw and cqh use container width and height; cqi and cqb follow writing-mode axes; cqmin and cqmax choose the smaller or larger percentage. If no eligible container exists, container units fall back to the small viewport equivalents, so bounds with clamp remain valuable.
.hero-shell { container-type: inline-size; }
.hero { padding: clamp(1rem, 4cqi, 3rem); }
.hero h2 { font-size: clamp(1.5rem, 7cqi, 3rem); }Use custom properties as component variants
Style queries can test a custom property's computed value on a containment ancestor. This provides a declarative variant channel without coupling descendants to extra classes. Define a base value so the query contract is explicit and avoid creating cycles in which queried state depends on rules inside the query.
.panel-shell { --panel-theme: light; }
.panel-shell[data-theme="dark"] { --panel-theme: dark; }
@container style(--panel-theme: dark) { .panel { color: #f8fafc; background: #0f172a; } }Apply containment only for a measured reason
contain can isolate size, layout, style, and paint effects, improving predictability and sometimes performance while changing behavior. content-visibility:auto can skip off-screen work and adds containment; contain-intrinsic-size supplies a placeholder to reduce scroll jumps. Test focus, find-in-page, sticky positioning, and overflow.
.feed-item {
content-visibility: auto;
contain-intrinsic-block-size: auto 24rem;
}
.widget-preview { contain: layout paint; }Local code tester
Resize a container-aware card
Change the shell width and watch the component adapt independently of the viewport.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.