jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Container Query Snippet Generator

Set up @container rules with container-type and container-name. Enter breakpoint conditions and the CSS to apply. Makes reusable components adapt to their container instead of the viewport.

Loading tool...

What is Container Query Snippet Generator?

Container queries let you apply CSS styles based on the size of a parent container rather than the viewport. This is different from media queries, which respond to the browser window. For reusable components, container queries mean the same component can render correctly in a narrow sidebar and a wide main content area without duplicating styles.

Quick answer

Use container queries to style an element based on the size of its parent container instead of the viewport. They are the component-level equivalent of media queries and are useful for reusable widget layouts.

Limitations

  • Container queries require Chrome 105+, Edge 105+, Firefox 110+, and Safari 16+. Older browsers ignore the feature entirely.
  • The container-name property must reference a container-type ancestor in the DOM. Elements outside the container tree cannot query it.
  • Container query units (cqw, cqh, cqi, cqb, cqmin, cqmax) are only meaningful inside a @container block and may produce unexpected values outside one.

How to use this tool

  1. Set a container-type and optional container-name for the parent element that will be the query reference.
  2. Choose a breakpoint condition such as min-width, max-width, or an inline-size range.
  3. Write the CSS rules that should apply when the condition is met.
  4. Copy the generated @container block and place it inside your component stylesheet.

What you can use it for

  • Make a card component switch from horizontal to vertical layout when its container shrinks.
  • Build a form row that stacks fields on narrow containers and places them inline on wide containers.
  • Create a widget that resizes its font and spacing based on the container width, independent of the viewport.

Use cases

Practical examples

Example

Card component in sidebar and main content

A reusable card is placed in both a narrow sidebar and a wide main column. With container queries, the card uses a stacked layout in the sidebar and a horizontal layout in the main content, all from a single component class.

Example

Form row that adapts to available space

A form with name, email, and phone fields uses a container query on the fieldset. When the container is wider than 500px, the fields sit inline. Below 500px, each field stacks to its own line.

Common mistakes

  • Applying container queries to an element without setting container-type on a parent, which means no container context is established and the queries never apply.
  • Using viewport units such as vw or vh inside a container query, which still reference the viewport rather than the container.
  • Relying entirely on container queries without a fallback layout, which leaves the component unstyled in browsers that do not support container queries.

Verification

  1. Resize the container element in DevTools and verify that child elements respond to container size changes, not viewport changes.
  2. Check fallback styles in unsupported browsers by setting base styles outside the @container block.

FAQ

Questions about Container Query Snippet Generator

Which browsers support container queries?

Container queries are supported in all modern browsers as of Chrome 105, Firefox 110, Safari 16, and Edge 105. For older browsers, provide a fallback layout that works without @container rules.

What is the difference between inline-size and size for container-type?

inline-size establishes a query container that responds to the inline dimension only, which is width in horizontal writing modes. size establishes a container that responds to both width and height but requires contain: layout style on the container, which can affect layout behavior.

Related tools

More css tools

Also try

Also try