CSS container query builder
A container query lets a component respond to the space it is given instead of the screen width. Choose the container, the grid inside it and a few breakpoints, then drag the width slider to see which rule applies.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Enter the selector of the element that should be the container and the grid inside it.
- Give the container a name, or clear the field for an unnamed container.
- Set the number of columns for the narrowest case, then add breakpoints with a container width and a column count.
- Drag the preview slider to check which rule applies, then copy the CSS.
How it works
The container rule sets container-type and, if you gave one, container-name. The grid starts with the base number of columns. Each breakpoint becomes an @container block that changes grid-template-columns. Like all CSS, the rules are applied in order, so the last one that matches wins; the preview follows the same order.
Example
With a base of 1 column and breakpoints min-width: 400px for 2 columns and min-width: 700px for 3, a container 520px wide matches only the first breakpoint, so the grid has 2 columns.
Tips
- Write breakpoints from small to large when you use min-width, and from large to small when you use max-width.
- Container units such as cqw are relative to the container, which works well together with these rules.
Frequently asked questions
What is the difference between a container query and a media query?
A media query looks at the viewport or the device. A container query looks at the size of a parent element that you mark with container-type, so the same component can be narrow in a sidebar and wide in the main column.
Should I use inline-size or size?
inline-size lets you query the width, which is what most layouts need, and the container's height still depends on its content. size also allows height queries but the container then needs a height that does not depend on its children.
Why can't a container query style the container itself?
A rule inside @container applies to descendants of the container, not to the container. That is why the generated rules target the grid inside the container element.
What does the container name do?
A name makes a query target one specific ancestor. Without it, the query uses the nearest ancestor that is a container, which is simpler but can pick the wrong one when containers are nested.
Which condition syntax should I pick?
Both mean the same. The min-width form is the older, widely recognised one. The range form such as (width >= 400px) is shorter, but check that it works in the browsers you support.