DEV Community

linou518
linou518

Posted on

CSS Container Queries in Practice: Component-Level Responsive Design Is Finally Production-Ready

#css #webdev #frontend #responsive

CSS Container Queries in Practice

Media Queries have ruled responsive layout for over a decade, but they have a fundamental flaw: they're based on the viewport, not the component. The same card component placed in a wide main area and a narrow sidebar needs different layouts — and Media Queries can't handle that elegantly. You end up with redundant class names or JavaScript hacks.

Container Queries fix this. In 2026, they're fully production-ready across all major browsers.

Three Types of Container Queries

1. Container Size Queries (Most Common)

Style children based on their container's dimensions:

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

@container card (width > 480px) {
  .card { flex-direction: row; }
}

.card { flex-direction: column; } /* Default vertical in narrow containers */
Enter fullscreen mode Exit fullscreen mode

Key point: the parent must explicitly declare container-type. This is the number one thing beginners forget.

2. Container Style Queries

Conditional styling based on CSS custom property values. Incredibly powerful with scoped CSS variables:

.theme-wrapper { --theme: dark; }

@container style(--theme: dark) {
  .btn { background: #1a1a1a; color: #fff; }
}
Enter fullscreen mode Exit fullscreen mode

3. Container Scroll-State Queries (Newest)

Pure CSS response to scroll state — add a shadow to your header on scroll, no JavaScript scroll listener needed:

@container scroll-state(scrolled-y) {
  .header { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
}
Enter fullscreen mode Exit fullscreen mode

Container Units: cqw / cqh

Like vw/vh, but relative to the container:

.card-title {
  font-size: clamp(1rem, 4cqw, 1.5rem); /* Fluid typography based on container width */
}
Enter fullscreen mode Exit fullscreen mode

Performance Advantage

Compared to ResizeObserver-based JavaScript approaches, Container Queries render approximately 35% faster with zero additional layout shift. Pure CSS, zero runtime cost.

Gotchas

  1. Explicit opt-in required — nothing happens without container-type on the parent
  2. Can't query yourself — only parent containers, preventing circular dependencies
  3. Prefer inline-size — size (both axes) constrains the container's normal size calculations
  4. Safari 16+ has full support; older versions need the cq-polyfill

Browser Support

Chrome 105+, Firefox 110+, Safari 16+, Edge 105+ — safe to ship in 2026. Adoption in React/Vue apps has reached 72%.

Practical Advice

  • Macro layout → Media Queries. Micro components → Container Queries. They complement each other, not replace
  • Design new components with Container Queries from the start
  • If you have ResizeObserver-based responsive logic, consider migrating to Container Queries for better performance and simpler code

Top comments (0)