CSS Container Query Builder

The CSS Container Query Builder is a free, browser-based tool that helps you construct CSS container queries without memorizing the syntax for container-type, container-name, and @container rules. Instead of consulting the specification, you choose options from dropdowns and type your values, and the tool generates ready-to-use CSS instantly.

Container queries let a component respond to the size of its nearest containment context rather than the viewport. This makes components truly reusable: a card component can switch from a stacked layout to a horizontal one depending on how much space its parent provides, regardless of the screen width.

The builder supports three container types: inline-size (tracks width only, the most common), size (tracks both width and height), and normal (no containment, used to opt out). You can name containers to target specific ancestors and add multiple size conditions (min-width, max-width, min-height, max-height, orientation, and more) combined with and or separated into individual @container rules with or.

All processing happens entirely in your browser. No data is sent to any server and no account is required. Click Copy or press Ctrl+Shift+C to copy the generated CSS to your clipboard.

This tool pairs well with the CSS @media Query Builder for traditional viewport-based responsive design, the CSS Layout Generator for building grid and flexbox layouts, and the Tailwind Config Builder for setting up container query breakpoints in Tailwind CSS v3.2+.

1. Select a Container Type from the dropdown: inline-size (width only), size (width + height), or normal (no containment).
2. Enter a Container Name (e.g. card, sidebar) or leave it blank for an unnamed container query.
3. Click Add Condition to add a size condition such as min-width: 400px or max-width: 800px.
4. Add more conditions as needed. Use the checkbox next to each condition to enable or disable it.
5. Choose whether to combine conditions with and (all must match) or or (separate @container rules).
6. Review the generated CSS in the output panel on the right (or below on mobile).
7. Click Copy or press Ctrl+Shift+C to copy the CSS to your clipboard. Alternatively, click a Common Preset to load a popular pattern instantly.