One card, two slots
The same HTML and CSS, at the same window width, gives two layouts, because each card asks its own slot. The wide slot may stick out of the narrow preview; scroll sideways to see it.
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
slot narrow: column
slot wide: row