Container Query Helper
Choose a parent class, container name, threshold, and fixed layout preset, then copy the paired CSS.
123456
A QUICK WALKTHROUGH
How to use this tool
- Enter valid ASCII CSS identifiers and choose a threshold.
- Choose columns and gap for the child layout.
- Review the local resize preview and copy the CSS.
A paired CSS contract
The helper emits container-type: inline-size on the parent and a named @container rule for the child class. It does not accept arbitrary CSS bodies.
Local preview boundary
Resize the sample container from 100 to 1200px. If the browser lacks CSS container-query support, the preview states that clearly.
GOOD TO KNOW
Common questions
What does the parent declaration do?
It makes the parent an inline-size query container.
Can I paste my own CSS?
No. The helper uses a fixed, safe layout preset instead of arbitrary CSS input.