500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.
Author @container boilerplate with names and breakpoints for component-driven responsive CSS.
Media queries style elements based on the viewport width, which works for page-level layouts but breaks down for design-system components used in many different contexts. A card component in a narrow sidebar needs different styling than the same card in a three-column main grid — but viewport width does not distinguish between these contexts. CSS container queries solve this by letting elements respond to the size of their direct container instead. The Container Query Helper generates the container-type declaration on the parent and the corresponding @container rule for the child, with threshold pickers for min-width and max-width breakpoints. Resize the live demo container to see the query trigger in real time before copying the CSS block.
Container queries respond to the parent element's size rather than the viewport. The same card component adapts its layout in a 240px sidebar and a 960px main area independently, without separate media query breakpoints for every layout context where the component might appear.
container-type: inline-size enables width-based queries on the parent without triggering full layout containment. container-type: size enables width and height queries but requires the element to have explicit dimensions. The helper explains the tradeoff and sets the right type for your use case.
Set min-width for styles that apply when the container is wider than the threshold, or max-width for styles that apply when the container is narrower. Range syntax (@container (200px <= width <= 400px)) covers interval-based responsive steps for multi-context components.
Container queries make design-system components truly self-contained. A product card with a compact and expanded layout can ship as a single component that detects its own context, rather than requiring the consuming layout to know about the component's internal breakpoints.
A resizable demo shows the container query triggering in real time as you drag the resize handle. This is the most critical feature — container queries often behave differently than expected when first written, and testing against a live resizable container catches issues immediately.
The output includes both the parent container declaration and the child @container rule as a complete paired block. Container queries require both halves — a standalone @container rule with no container-type on the parent silently does nothing.
Input: container-type: inline-size, query: min-width 400px, apply grid-template-columns: 1fr 1fr
Output: .card { container-type: inline-size; container-name: card; } @container card (min-width: 400px) { .card-inner { grid-template-columns: 1fr 1fr; } }
Input: container-type: inline-size, query: max-width 240px, hide .subtitle
Output: .widget { container-type: inline-size; } @container (max-width: 240px) { .widget .subtitle { display: none; } }
Input: container-type: inline-size, query: min-width 600px, font-size 2rem
Output: .parent { container-type: inline-size; } @container (min-width: 600px) { .heading { font-size: 2rem; } }