CSS Container Query Generator
NewBuild a @container CSS query that responds to a parent container's own size rather than the viewport, with the required container-type setup included.
Container queries (supported in all major browsers since 2023) let an element's styles respond to the size of its nearest containing element instead of the viewport, which makes reusable components like cards genuinely responsive regardless of where they're placed on the page. Remember to set container-type: inline-size; (and optionally container-name) on the parent element for the query to take effect.
Frequently Asked Questions
How is a container query different from a media query?
A media query (`@media`) responds only to the overall browser viewport size, while a container query (`@container`) responds to the size of a specific parent container element — so the same reusable component can style itself differently depending on where it's placed, regardless of the overall page width.
Why do I need to set container-type on the parent element?
Container queries only work on elements whose nearest ancestor has explicitly opted in with `container-type` (usually `inline-size`, which tracks the container's width) — without that declaration on a parent, the `@container` rule has nothing to measure against and won't apply.
What is container-name used for?
It lets you target a specific named container when you have multiple nested containers that could otherwise ambiguously match the same `@container` query — it's optional but recommended once your layout has more than one container query source.
Which browsers support container queries?
All major browsers (Chrome, Edge, Firefox, and Safari) have supported container queries since 2023, so they're safe to use in most modern production projects today without a fallback.
Can I write multiple rules inside one container query?
Yes — paste as many CSS rules as you need into the rules box, and they'll all be indented and nested inside the same generated `@container` block.