CSS Container Query
Generator
Visually build CSS @container queries with GUI. Features container-type/name settings, breakpoints, 6 presets, and live preview. Convert media queries easily. No registration required.
Container Settings
Presets
Breakpoints
Live Preview
Generated Code
🔄 Media Query → Container Query
You might also like
About CSS Container Query Generator
The CSS Container Query Generator is a developer tool that allows you to visually build "@container" queries, the new standard in responsive design, using a GUI. While media queries depend on the viewport width, container queries depend on the parent element's width, enabling flexible layout switching per component.
This tool seamlessly handles container-type/name settings, breakpoint addition, and live previews. It also features a bulk converter for existing media queries, smoothing the transition to the new specification. Everything runs safely within your browser.
How to Use
Configure Container & Add Breakpoints
Set the container selector and container-type (usually inline-size). Then "Add Breakpoint" and input CSS styles to apply when the container reaches a specific size. You can also start from a preset.
Live Preview Testing
Drag the right edge of the preview area to resize the container and verify that the styles switch correctly at your breakpoints. You can also test with custom HTML from your project.
Export & Convert Code
Copy the generated CSS code into your project. Use the "Media Query Converter" to easily replace existing @media syntax with @container, saving migration effort.
Container Query Glossary
- Container Query (@container)
- A CSS feature to change styles based on the size of a specific parent element (container) rather than the viewport.
- container-type
- Property that defines an element as a query container. inline-size targets the horizontal axis; size targets both axes.
- container-name
- Property to explicitly name a container, useful when multiple containers are nested.
- Containment
- A concept required for container queries, isolating an element's layout/style calculations from the rest of the DOM.
- Inline-axis
- The axis along which text flows. In horizontal writing, this corresponds to width.
- Media Query (@media)
- Traditional CSS feature that applies styles based on viewport size or device characteristics.
- cqw / cqh / cqi / cqb
- Relative units for container queries representing 1% of the container's width/height/inline/block size, akin to vw/vh.
Frequently Asked Questions
- Q.Is the data I enter sent to a server?
- No. This tool runs entirely client-side (in your browser). Your HTML/CSS and generated code are never sent to external servers.
- Q.Should I use media queries or container queries?
- Use media queries for macro-layouts (page structure like headers, sidebars) and container queries for micro-layouts (components like cards, buttons) that should optimize their layout based on available space.
- Q.What is the browser compatibility?
- It is supported in all major modern browsers since 2023, including Chrome 105, Safari 16, and Firefox 110. Legacy browsers are not supported, but graceful fallbacks can be implemented.
- Q.Any caveats when using container-type: size?
- When using size, block-axis (height) containment is applied. If you don't set an explicit height, the element may collapse to zero height. Using inline-size is generally recommended.
- Q.How is the custom HTML preview isolated?
- We use Shadow DOM to isolate the preview area, ensuring that the generator's own CSS does not interfere with the markup in the preview.
Use Cases
Reusable Card Components
Perfect for designing self-contained card UIs that adapt to a 3-column main area or a 1-column sidebar.
CMS & Widget Integration
Create blocks for CMS like WordPress that automatically adjust their layout regardless of the widget area's width.
Complex Dashboard UIs
Ideal for dynamically optimizing the placement of charts and stats within resizable dashboard panels.
Legacy Code Modernization
Use the converter to transition massive media query blocks into maintainable, component-based container queries.
CSS Container Query Tech Docs
CSS Container Queries are achieved by combining the @container rule and the container-type property. This is a fundamentally different approach from traditional media queries.
Difference from Media Queries
Media queries (@media) change styles based on the viewport dimensions. Container queries (@container) change styles based on the parent container's dimensions. Placing the same component in both a sidebar and main content required separate media query handling, but container queries apply the correct layout automatically.
container-type Values
inline-size allows querying only in the horizontal (inline) axis and is the most common choice. size queries both horizontal and vertical axes but requires height containment. normal is the default and excludes the element from container queries.
Browser Support
Supported in Chrome 105+, Safari 16+, Firefox 110+, and Edge 105+. Fully supported in all modern browsers since 2023. Unsupported browsers safely ignore the @container rules (progressive enhancement).
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.