Container Queries Finally Mature: The CSS Feature That Changes Component Design

For years, responsive design meant media queries: "If the viewport is this wide, apply these styles." Container queries flip this: "If my container is this wide, apply these styles." Components become truly portable.

Why Container Queries Matter

A card component in a sidebar should look different than the same component in a full-width grid. With media queries, you need to know where the component is used and write viewport-specific styles. With container queries, the component adapts to its own container automatically.

Browser Support (2026)

• Chrome: Full support (since v105)
• Safari: Full support (since v16)
• Firefox: Full support (since v110)
• Edge: Full support
• Total: 96%+ of global users

Practical Example

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

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

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

@container card (min-width: 700px) {
  .card {
    grid-template-columns: 250px 1fr 150px;
  }
}

The card layout adapts to its container, not the viewport. Put it in a sidebar: compact layout. Put it in full-width: expanded layout. Zero changes needed.

What This Enables

1. Truly reusable components: Same component works in any context
2. Design system flexibility: Components adapt without variant props
3. Dashboard layouts: Widgets resize gracefully when panels are resized
4. CMS content: Components work regardless of template layout
5. Email-style layouts: Components that reflow based on available space

Container Query Units

Container queries also introduce new CSS units:

• cqi: 1% of container inline size
• cqb: 1% of container block size
• cqw: 1% of container width
• cqh: 1% of container height

These enable fluid typography and spacing relative to the container, not the viewport.

Container Style Queries

Beyond size, containers can query styles:

@container style(--theme: dark) {
  .card { background: #1a1a1a; }
}

Style queries let components respond to CSS custom properties, enabling theme-aware components without JavaScript.

Impact on Tailwind CSS

Tailwind CSS v4 includes container query utilities:

<div class="@container">
  <div class="@md:flex @md:gap-4">
    <!-- Flexbox when container is medium-sized -->
  </div>
</div>

This makes container-responsive design as easy as viewport-responsive design in Tailwind.

Our Adoption

We use container queries in every new project. They eliminate the fragile coupling between component styles and page layout. Combined with Tailwind CSS container utilities, we build components that are genuinely portable across different page sections and layouts.