What is a CSS container query?

A CSS container query (@container) lets you apply styles to an element based on the size of its parent container, rather than the viewport. This enables truly reusable, responsive UI components that adapt to their context — regardless of where they're placed on the page.

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

container-type: inline-size enables containment on the inline axis only (width in horizontal writing modes), which is the most common choice and has the lowest performance overhead. container-type: size enables containment on both axes (width and height). Use inline-size unless you specifically need to query the container's height.

Do I need container-name for @container queries?

No — container-name is optional. If omitted, the @container rule matches the nearest ancestor that has container-type set. Use named containers when you have nested containers and need to target a specific ancestor.

Which browsers support CSS container queries?

CSS container queries are supported in all modern browsers: Chrome 105+, Firefox 110+, Safari 16+, and Edge 105+. They are safe to use in production today. Use @supports (container-type: inline-size) for progressive enhancement if you need to support older browsers.

Can I query a container's height with @container?

Yes — use container-type: size and then query with (min-height: Xpx) or (max-height: Xpx). Height-based queries are less common but useful for components in fixed-height contexts like sidebars or panels.

Is the generated CSS production-ready?

Yes. The generated code is clean, standards-compliant CSS that you can paste directly into your stylesheet. No frameworks, no build tools, no dependencies required.

Modern CSS Tool

Generate CSS Container
Queries Instantly

Define container types, add breakpoints, specify CSS properties — and copy production-ready @container rules in seconds. No login. No server. 100% browser-based.

📦

Visual Container Builder

Set container names and types (size, inline-size, normal) with a guided form — no syntax memorisation needed.

📐

Unlimited Breakpoints

Add as many @container query breakpoints as you need, each with their own set of CSS property-value pairs.

⚡

Copy-Ready Output

Instantly copy clean, production-ready CSS to your clipboard. Supports px, em, rem, %, and custom conditions.

Container Setup

Container class name

container-type

Containment on inline axis (width)

container-name (optional)

Named containers allow targeting a specific ancestor in nested layouts.

@container Rules

@container rule 1(min-width: 400px)

Condition

Target selector

CSS Properties

Generated CSS

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

@container (min-width: 400px) {
  .card-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

Supported in Chrome 105+, Firefox 110+, Safari 16+, Edge 105+ · Can I use?

Frequently Asked Questions

Everything you need to know about CSS Container Query Generator.

Generate CSS ContainerQueries Instantly