midCSS
What are Container Queries?
Updated Apr 28, 2026
Short answer
Container queries allow elements to adjust their styling based on the size of their parent container rather than the viewport.
Deep explanation
Unlike media queries (@media) that respond to the window size, container queries (@container) respond to the dimensions of a specific container element. This makes components truly modular, as they adapt based on where they are placed, not just screen size.
Real-world example
A card component that switches to a horizontal layout when placed in a wide content area, but stays vertical in a narrow sidebar.
Common mistakes
- Forgetting to define the `container-type` on the parent, which makes the `@container` query fail.
Follow-up questions
- What is container-type: inline-size?