Container Query Generator

Q: Can I use container queries with Sass or Tailwind?

Yes. Sass passes @container rules through to the output CSS unchanged, so you can nest them inside your component selectors just like media queries. Tailwind CSS v3.2+ includes container query utilities out of the box via the @container variant — you add a @container class to the parent and use responsive-like prefixes such as @md:grid-cols-2 on children. PostCSS and other build tools also support container queries natively since they are standard CSS syntax.

Q: What is the difference between container queries and media queries?

Media queries respond to viewport size, affecting all components equally. Container queries respond to a specific parent's size, so the same component adapts differently in a sidebar vs. main content area.

Q: Can I use container queries for height?

Yes, use container-type: size to enable both width and height queries. Use container-type: inline-size for width-only queries (more common and better for performance).

Q: Do container queries work with CSS Grid and Flexbox?

Yes, container queries work independently of layout method. A grid item can query its container's size and adjust its own internal layout accordingly.

Container queries are the biggest shift in responsive design since media queries. Instead of styling components based on viewport size, @container lets you style based on the parent element's size — which means the same component renders correctly in a sidebar or a main column without custom props. This generator helps you write correct @container syntax including the easy-to-forget container-type declaration. Set a container name, choose a container type, define your breakpoint condition, and get copy-paste CSS output instantly.

Container Name Container Type Condition

Container width: 500px

Image

Card Title

This is a sample card component inside the container. Resize the container horizontally to see the layout change when it crosses the breakpoint.

Direct CSS

CSS Variables

What are container queries?

Container queries let you apply styles based on the size of a containing element rather than the viewport. With media queries, a card component always responds to the browser window width — even if the card lives in a narrow sidebar. Container queries fix this by letting you write rules like "if my parent is wider than 400px, switch to a horizontal layout." This makes components truly portable: drop the same card into any layout context and it adapts automatically, without JavaScript or layout-specific overrides.

The key mechanism behind container queries is size containment. When you set container-type: inline-size on an element, you tell the browser to track that element's inline dimension (width in horizontal writing modes) and make it available for queries. Child elements can then use @container rules to apply styles conditionally based on the container's size. You can also assign a container-name to distinguish between multiple containers in nested layouts.

Container queries represent the biggest shift in responsive design since media queries were introduced. They move responsive logic from the page level to the component level, which aligns perfectly with component-based architectures used in frameworks like React, Vue, and Svelte. A single card component can define its own breakpoints and look correct whether it is placed in a full-width main area, a narrow sidebar, or a modal dialog.

How to use this tool

First, enter a container name — this identifies which container the query targets. Names are optional but recommended when you have multiple containers in a layout. Next, choose a container type: inline-size tracks the container's inline (usually horizontal) dimension, size tracks both dimensions, and normal disables size containment (used for style container queries only). Then set your condition, such as min-width: 400px or max-width: 600px.

The generator produces the two CSS blocks you need: the container declaration on the parent element and the @container rule for the child. Copy the Direct CSS output and paste it into your stylesheet, or use the CSS Variables version if you prefer custom properties. Resize the live preview horizontally to see exactly how the layout shifts at your chosen breakpoint. The width indicator updates in real time so you can verify the exact pixel value where the change occurs.

Practical examples

Responsive card component

A card that stacks vertically when its container is narrow and switches to a horizontal layout when the container is wide enough. This is the most common container query pattern.

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@container card (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }

  .card img {
    height: 100%;
    object-fit: cover;
  }
}

Sidebar widget that adapts to sidebar width

A widget component that shows a compact single-column view in a narrow sidebar and expands to a richer layout when the sidebar is wider. This pattern is common in dashboard applications where sidebars can be resized.

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

.widget {
  padding: 1rem;
}

.widget .details {
  display: none;
}

@container sidebar (min-width: 300px) {
  .widget .details {
    display: block;
  }

  .widget .title {
    font-size: 1.25rem;
  }
}

@container sidebar (min-width: 500px) {
  .widget {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

Dashboard panel with container-aware layout

Dashboard panels that rearrange their internal content based on how much space the grid gives them. Each panel queries its own container, so the same panel component works in a two-column or four-column dashboard grid.

.panel {
  container-type: inline-size;
  container-name: panel;
  background: var(--surface);
  border-radius: 8px;
  padding: 1.5rem;
}

.panel .stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@container panel (min-width: 350px) {
  .panel .stats {
    flex-direction: row;
    justify-content: space-between;
  }
}

@container panel (min-width: 600px) {
  .panel .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}

Common patterns and best practices

Container queries are straightforward to use, but a few patterns will help you get the most out of them.

Always declare container-type. Without it, @container rules that check size conditions will never match. The most common value is inline-size, which enables width-based queries without the layout restrictions of full size containment.
Name your containers. When you have nested containers, unnamed @container queries match the nearest ancestor with containment. Naming containers with container-name makes your queries explicit and avoids unexpected matches.
Use the shorthand container property. Instead of writing container-type and container-name separately, use container: card / inline-size as a shorthand (name first, then type after the slash).
Prefer inline-size over size. Full size containment restricts the element in both dimensions, which can cause layout issues if the element's height depends on its content. Only use size when you genuinely need height-based queries.
Think component-first. Container queries work best when each component defines its own breakpoints. Avoid using container queries to replicate page-level media query behavior — that defeats the purpose of component-scoped responsiveness.
Combine with CSS nesting. Modern CSS nesting lets you write container queries inline within a component's styles, keeping all responsive logic co-located and easy to maintain.

Browser support

Container size queries are supported in all major browsers since early 2023: Chrome 105+ (August 2022), Firefox 110+ (February 2023), Safari 16+ (September 2022), and Edge 105+. Container style queries (querying custom property values with style()) are supported in Chrome 111+ and are still in development in Firefox and Safari. For size-based container queries, you can use them in production today without polyfills. For style queries, consider feature detection with @supports (container-type: inline-size) and provide a reasonable fallback for older browsers.

FAQ

Why do I need container-type?

The browser does not automatically track every element's size — doing so would be too expensive. You must explicitly declare container-type on the parent element to opt into size containment. This tells the browser to track that element's dimensions so @container rules can query against it. Without container-type, @container rules that reference size conditions will simply never match, and your responsive styles will not apply.

Can I use container queries with Sass or Tailwind?

Yes. Sass passes @container rules through to the output CSS unchanged, so you can nest them inside your component selectors just like media queries. Tailwind CSS v3.2+ includes container query utilities out of the box via the @container variant — you add a @container class to the parent and use responsive-like prefixes such as @md:grid-cols-2 on children. PostCSS and other build tools also support container queries natively since they are standard CSS syntax.

What is the difference between container queries and media queries?

Media queries respond to the viewport size, meaning every component on the page is affected equally by the same breakpoint. A card component styled with media queries behaves the same whether it is in a wide main column or a narrow sidebar, because the viewport width is identical in both cases. Container queries respond to a specific parent element's size, so the same component can adapt differently depending on where it is placed in the layout. This makes container queries ideal for reusable components in component-based architectures.

Can I use container queries for height?

Yes, use container-type: size to enable both width and height queries. You can then write rules like @container (min-height: 300px). However, container-type: inline-size (width-only) is more common and better for performance because full size containment prevents the element's height from being determined by its content. Only use size when you have a fixed-height container or genuinely need to query height.

Do container queries work with CSS Grid and Flexbox?

Yes, container queries work independently of the layout method used. A grid item can have container-type: inline-size and its children can query the grid item's size to adjust their own internal layout. Similarly, a flex item can be a container, and its contents can respond to the flex item's computed width. The container query system is purely about size tracking and conditional style application — it does not interact with or depend on any particular layout algorithm.