Viewport breakpoints lie inside sidebars and split panes. Container queries fix it: styles respond to the nearest container's width.
<aside class="@container">
<div class="grid grid-cols-1 @md:grid-cols-2 gap-4">
<!-- two columns when the SIDEBAR is ≥ 768px, whatever the viewport -->
</div>
</aside>The grammar#
| Syntax | Meaning |
|---|---|
@container | Establish a container context |
@md:flex | From container width 768px (screen names reused) |
@min-[400px]:grid | Arbitrary min container width |
@max-lg:hidden | Below container width 1024px |
When to use#
- Widgets embedded at multiple widths (cards, sidebars)
- Design-system components that must adapt to their slot
- Anywhere
md:would be wrong inside a narrow column
Note. Container queries are the modern answer to "the component should be responsive, not the page."