v149 · CSS · Container Queries
Multi-condition Explorer
Use commas to match wide containers AND narrow containers with the same rule. Drag the resize handle to see the card style change when the container is either very narrow OR very wide — two separate breakpoints in one @container rule.
rule 1 (≥400px): layout swap
rule 2 (≤250px OR ≥500px): blue border
Comma-separated @container
Drag the right edge to resize. The card layout changes at 400px. The blue border triggers at <250px OR >500px — two separate conditions in one rule.
Chrome 149
/* Active container width: — */
/* Rule 1: single condition — layout swap at ≥400px */
@container demo-box (min-width: 400px) {
.card { flex-direction: row; }
}
/* Rule 2: comma-separated — blue at ≤250px OR ≥500px */
@container demo-box (max-width: 250px), (min-width: 500px) {
.card { border-color: var(--accent-blue); }
}
the comma rule
A comma in @container means any query can match — exactly like @media screen, print { … }. Each comma-separated clause is evaluated independently against the named container, and if any clause passes, the block applies.
/* Chrome 149+: OR logic with commas */
@container card (max-width: 200px), (min-width: 600px) {
/* applies when the container is very narrow OR very wide */
}
/* Equivalent to writing two separate rules: */
@container card (max-width: 200px) { … }
@container card (min-width: 600px) { … }
/* But with commas you can target disjoint breakpoints
in a single, self-documenting rule */see also
- Breakpoint Matrix — visualise container query breakpoints
- Fallback Query — use comma-OR for graceful fallbacks
- Feature index
scenario focus
Select a scenario to focus its rendered example and summary.
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗