Experiment with CSS container queries visually with resizable containers and responsive component code.
CSS Container Query Builder lets you establish a query container, resize its preview, and observe a component switching styles at container-width thresholds while producing corresponding CSS. It is intended for component-level responsiveness: a card can change layout when its parent becomes wide enough even though the browser viewport remains unchanged. The usual surprise is that `@container` does not automatically measure the viewport or every ancestor. A size query needs an eligible containment context, commonly created with `container-type: inline-size`, and evaluates the selected query container rather than the component itself.
The preview separates the component from the viewport by placing it inside a resizable query container. For inline-axis size queries, the relevant CSS declaration is `container-type: inline-size`. Changing the container width lets you inspect the same component on both sides of a breakpoint without treating the entire browser window as the responsive boundary.
A threshold becomes an `@container` condition, such as `@container (min-width: 30rem)`, containing the declarations that should apply once the chosen container meets that condition. Base rules remain outside the query. If several thresholds match, ordinary CSS cascade, specificity, and source-order rules still determine which declarations win.
No, not as its main purpose. Container queries respond to the dimensions of an eligible ancestor, whereas viewport breakpoints are normally expressed with media queries. Use this builder when a component should adapt to the space allocated by its surrounding layout. Use a media query when the condition genuinely concerns the viewport or another media feature.
The queried container may not be changing size, even though the viewport is. Resize the builder's container and check that the relevant ancestor has `container-type: inline-size` or another suitable container type. Also verify that the threshold is crossed and that a nearer eligible ancestor is not being selected unexpectedly.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.