Last Updated: November 21, 2025
Focus Areas
| Focus |
|---|
Enable container type on wrappers
|
Use `@container` instead of global media queries
|
Commands & Queries
.card { container-type: inline-size; }
Enable container
@container (min-width: 400px) { ... }
Style based on container width
Open devtools → Layout → Container Queries
Inspect behavior
Summary
Leverage container queries for component-based responsiveness and test in DevTools.
💡 Pro Tip:
Set `container-type` and `container-name` before using `@container` rules.