Lessons
Learn container queries concept by concept. Each lesson loads directly into the playground so you can edit and experiment.
Container queries need a containment context before they work. You create one by adding `container-type` to an ancestor element. Without it, `@container` rules are silently ignored.
Container query units are percentages of the container dimensions — like `vw`/`vh` but relative to the nearest containment context instead of the viewport. Watch the Value Panel on the right as you resize.
By default, `@container` queries the nearest ancestor with `container-type`. Use `container-name` to target a specific ancestor by name — the query will skip any closer unnamed containers to find the named one.
When containers are nested, each element queries its nearest container ancestor — not the outermost one. This lets you build independently responsive components that work at any level of nesting.
A production-ready component using container queries throughout — `@container` for layout breakpoints, `cqw` for fluid sizing, and `clamp()` for bounded scaling. The same component works in a sidebar, a grid, or full-width.