Container Query Builder

How to use it

1. Type a container name, or leave it empty to produce an anonymous query.
2. Choose the container-type. inline-size lets you query the width, size adds height queries but requires a definite height.
3. Set the first condition, for example min-width 400px, and tick the box if you need a second one.
4. Pick the relation. and requires both, or accepts either, not negates the first condition only.
5. Copy the CSS. The first block declares the container on the wrapper, the second holds your component rules.

Common use cases

• Component level layout - switch a card from a stacked shape to a row based on the width of its slot.
• Reusable widgets - style a widget by the space it is given instead of by the viewport size.
• Sidebar aware content - adapt a list when the surrounding column becomes narrow.
• Learning container syntax - see how the declaration and the query relate before writing it by hand.

Why it stays private

The rule is assembled from the values you type. There is no upload, no account and no network request, so your class names and sizes stay in your browser.

FAQ

Q: Why does nothing happen when I add a container-type? A: A container query only matches inside a descendant of the declared container. Make sure the element you style sits inside the wrapper that carries container-type, not inside a different branch of the tree.

Q: When should I use size instead of inline-size? A: Use inline-size for width based queries, which is the common case. Use size only when the container has a height that does not depend on its content, otherwise height queries may resolve against an auto height and not behave as you expect.

Q: Can a container query look at the viewport? A: No. A container query measures the nearest ancestor container with a matching container-type. If you want to react to the viewport, use a media query instead.