Container Range Query (400px to 800px)
Target a specific container width range using combined min-width and max-width conditions in a single @container rule for precise style application.
Advanced Patterns
Detailed Explanation
Container Range Queries
Sometimes you need styles that apply only within a specific width range, not just above or below a threshold. Combine min-width and max-width in a single @container rule.
The CSS
.content-area {
container-type: inline-size;
container-name: content;
}
/* Only applies between 400px and 800px */
@container content (min-width: 400px) and (max-width: 800px) {
.content-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
}
Layered Breakpoints
Range queries work best as part of a layered breakpoint system:
/* Narrow: single column */
.layout { display: block; }
/* Medium: two columns */
@container content (min-width: 400px) and (max-width: 799px) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
/* Wide: three columns */
@container content (min-width: 800px) {
.layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
New Range Syntax
CSS also supports the newer range syntax for container queries (Chrome 111+):
@container content (400px <= width <= 800px) {
/* Same as min-width: 400px and max-width: 800px */
}
When to Use Range Queries
- Applying styles that should not persist at wider sizes (e.g., a 2-column layout that should become 3 columns, not stay at 2)
- Creating "tablet-only" or "medium-only" component styles
- Fine-tuning transitions between breakpoints
Use Case
Use range queries when you need styles that apply only within a specific container width band. This is common for medium-size layouts that should differ from both narrow and wide configurations.