CSS Snippet

Component-Aware Container Queries

Difficulty: Hard

Media queries respond to viewport size, but components do not always live at viewport scale: a card might render in a sidebar at 240px or in a feature row at 800px. Container queries let a component style itself based on its own width. This snippet covers the basic `@container` rule, the size container with named breakpoints, and the style container variant for theming children based on parent state.