Skip to main content
Admin Panel
SC
Published
1 min read
219 words
Save
Publish
## The Viewport Problem Media queries respond to the viewport width. But components don't live in the viewport — they live in containers of varying sizes. A sidebar card needs different styles than the same card in a main content area. Media queries can't distinguish between these contexts. ## Enter Container Queries ```css .card-container { container-type: inline-size; container-name: card; } @container card (min-width: 400px) { .card { display: grid; grid-template-columns: 200px 1fr; } } @container card (max-width: 399px) { .card { display: flex; flex-direction: column; } } ``` Now the card layout adapts to its container, not the viewport. ## Real-World Use Cases 1. **Dashboard widgets** — same component renders differently in 1-column vs 3-column grids 2. **Product cards** — horizontal in wide containers, vertical in narrow ones 3. **Navigation** — inline links collapse to a dropdown in narrow sidebars ## Container Query Units New units relative to the container: ```css .title { font-size: clamp(1rem, 3cqi, 2rem); } ``` - `cqi` — 1% of container inline size - `cqb` — 1% of container block size - `cqmin` / `cqmax` — smaller/larger dimension > **Tip:** Combine container queries with CSS Grid's auto-fit for truly fluid, container-aware layouts. ## Browser Support Container queries are supported in all modern browsers since 2023. You can use them in production today with zero polyfills.