← Back to at-rules
CSS At-rule
@container
ResponsiveApplies styles based on the size of a containing element rather than the viewport.
Syntax
@container (condition) { }Example
@container (min-width: 400px) { .card { flex-direction: row; } }Common use cases
- Component-level responsive design
- Cards that adapt to their container width
- Reusable components in variable-width layouts
Practical developer insight
The parent element needs container-type: inline-size set before @container queries will work — easy to forget and hard to debug.