CSS Container Queries: Building Truly Responsive Components

Container queries change the game for component-based design. Instead of relying solely on viewport media queries, components can now respond to their container's size.

Why Container Queries Matter

Traditional media queries only respond to viewport size. This creates problems when:

• Components appear in different contexts (sidebar vs main content)
• Grid layouts have dynamic column counts
• Components need to be truly reusable across projects

Basic Syntax

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

Real-World Use Cases

1. Adaptive Card Layouts

Cards that switch from vertical to horizontal layout based on available space, not viewport width.

2. Responsive Navigation

Navigation that collapses to hamburger menu based on container size, perfect for sidebars.

3. Typography Scaling

Adjust font sizes based on container width for better readability in different contexts.

Container Query Units

New units make sizing even more flexible:

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

Browser Support

Container queries are supported in all modern browsers since 2023. For older browsers, use feature detection:

@supports (container-type: inline-size) {
  /<em> Container query styles </em>/
}

Best Practices

Name your containers - Use container-name for clarity

Start with inline-size - Most common use case

Combine with media queries - Use both for optimal responsiveness

Test in different contexts - Verify components work in various container sizes

Conclusion

Container queries unlock true component-based responsive design. Components become self-contained, reusable, and adapt to their environment automatically.

Try building responsive components with our CSS Grid Generator and test them in different container sizes!