Resize a container and watch
The script tries three widths and reads the result, then hands the box back to you: drag its bottom-right corner to resize it yourself. The label and its size change with the box, not the window. The font size is 0.5rem + 4% of the box's content width (8px + 7.2px at 180px), capped at 1.6rem (25.6px).
Container queries let a component respond to the size of its own container instead of the whole window: mark an ancestor with container-type: inline-size, then write @container (min-width: 400px) { ... }, and size things with container units like cqi.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a .profile component stack its avatar above its text by default and place them side by side when its container is at least 360px wide.
Inside a container named widget, hide .extra when the widget is narrower than 250px. Make sure a nested container doesn't answer instead.
Make a card title scale with the card width between 1rem and 1.75rem.
Explain it without notes
What problem do container queries solve that media queries can't?
What does container-type: inline-size do, and why is it required?
Why can a container collapse to zero width, and how do you avoid it?
What are container query units, and what do they fall back to?
Preview
Console
Nothing logged yet.Expected console output
180px: "small panel" 15.2px
300px: "medium panel" 20px
500px: "large panel" 25.6px