Build a named container query and resize the preview

Name the container, choose container-type and a width condition, then drag the preview: the readout gives the container’s content-box width and whether the query matches right now, and the export is the complete @container rule. Ranges keep the numbers you type — a minimum above the maximum matches nothing, and the readout says so.

Runs locally in your browser

View category: Frontend & Design (34)

· container-type · container-name · @container

QUERY CONTROLS

container-type

min-width (px)

max-width (px)

620px

RESIZE STAGE

01API contract

02Build output

03Runtime check

04Release notes

EXPORT CSS

How to build and test a container query

Name the container, pick container-type and a width condition, then drag the preview: the readout reports the container's content-box width and whether the query matches right now. The export panel holds the complete CSS — the .component-shell declaration with container-type and container-name, plus the @container block that switches the grid to the chosen number of columns.

Every number in these notes was measured while testing: the readout agreed with the rendered grid in all 11 keyboard states, the eight defaults are card-shell / inline-size / min / 480 / 760 / 620 px / 3 columns / 16 px, and the Copy button wrote exactly the text shown in the export panel (compared through the clipboard).

Enter a container name (up to 32 characters) and choose container-type: inline-size or size. The name is lowercased, spaces and punctuation collapse to - and a leading digit gets an x- prefix.

Choose the query condition — Minimum width, Maximum width or Width range — and type the min-width / max-width numbers you want in the rule.

Drag Preview width between 220 and 900 px. The readout updates as you drag; Matched means the grid rule is applied inside the preview, Not matched means it is not.

Set Columns when matched (1–4) and Gap (0–64 px). Both values are clamped to those ranges in the preview and in the exported CSS.

Press Copy CSS and paste the result; Reset puts back card-shell, inline-size, min, 480, 760, 620 px, 3 columns and 16 px.

What the preview measures, the numbers the export keeps, and what the tool leaves out

What the preview measures

The readout counts the container's content box: the 13 px padding on each side is excluded, so a 620 px preview reports 620px. The container query itself measures the same box, which is why the two agree. Matched switches the four cards to the column count you chose; Not matched leaves them in a single column.

The stage also caps the preview: on a 1360 px window the width slider reaches 900, but the preview stops at 878 px and the readout reports 878px rather than the requested value. container-type: size keeps the height the preview already had (204 px in one row, 352 px stacked) so the demo does not collapse under size containment.

The numbers you type are the numbers you get

The two width fields are independent. A range exports both values verbatim — min 1000 with max 300 writes (min-width: 1000px) and (max-width: 300px), which can never match, and the readout says Not matched instead of quietly rewriting the rule. Max mode uses the max field alone, so min-width no longer leaks into it.

Columns and gap are clamped to what the controls allow: typing 7 columns exports repeat(4, minmax(0, 1fr)) and typing 80 px exports gap: 64px, the same values the preview renders. Copy CSS puts exactly that text on the clipboard, and Reset restores the eight defaults listed above.

What the tool does not do

It covers one named container with width conditions only: min-width, max-width or a range. There are no style queries, no scroll-state queries, no height-only queries and no second container, and the component CSS it prints is example scaffolding — .component-shell and .component-grid — meant to be renamed for your own markup.

Nothing leaves the page. While the controls were driven and the CSS was copied during testing, the browser sent no request at all, and the rail says so. The readout words are localized in all six locales, including the French Correspond / Ne correspond pas and the Japanese 一致 / 一致しない.