Search pages

Search all CSS Showcase pages by name

Container Queries

Finally! Components that respond to their container's size, not the viewport. Build truly reusable components that work anywhere.

Chrome 106+Firefox 110+Safari 16+Edge 106+

What are Container Queries?

Container queries allow you to apply styles based on the size of a containing element rather than the viewport. This means your components can adapt to any layout context — sidebar, main content, or anywhere else!

Old Way vs New Way
Media queries respond to the viewport — container queries respond to the parent. A fundamental shift in responsive design.

Media Queries (Old Way)

/* Responds to viewport only */
@media (min-width: 768px) {
    .card {
        display: grid;
        grid-template-columns: 200px 1fr;
    }
}

/* Problem: Card looks wrong in sidebar! */

Container Queries (New Way)

/* Responds to container size */
.card-container {
    container-type: inline-size;
}

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

Interactive Examples

These demos use real CSS container queries. Resize the containers to see how the same component adapts to different sizes.

Responsive Card Component
Resize the containers below to see how the same product card adapts to different sizes — from compact to full-width.
↔ Drag to resize
CSS Course
Web Development

Master Modern CSS

Learn everything from basics to advanced techniques including Container Queries, :has(), and more!

£49.99
Sidebar (300px)
CSS Course
Web Development

Master Modern CSS

Learn everything from basics to advanced techniques including Container Queries, :has(), and more!

£49.99
css
Container Size Units
Container query units let you size elements relative to their container, not the viewport.

Using cqw (container query width)

This text scales with container width!

Using cqh (container query height)

Height-based sizing
css
Named Containers
Give containers names to target specific ancestors when you have nested containment contexts.

Outer Container

Inner Container

I respond to the inner container!
css
Style Queries
Query custom properties on containers — components can adapt to theme context without extra classes.

Dark Theme Container

Components adapt to container styles!

Light Theme Container

Same component, different container style

css

Container Queries vs Media Queries

Understanding when to use each approach is key to building robust responsive systems.

Feature Comparison
FeatureMedia QueriesContainer Queries
Responds toViewport sizeContainer size
Use casePage-level layoutsComponent-level layouts
ReusabilityLimited (viewport-dependent)High (context-independent)
Browser supportUniversalModern browsers (87%+)
PerformanceExcellentGood (slight overhead)
When to Use Each

Use Media Queries for:

  • Overall page layout
  • Navigation changes
  • Major breakpoints
  • Print styles

Use Container Queries for:

  • Reusable components
  • Card layouts
  • Sidebar widgets
  • Dynamic grid items

Real-World Examples

See how container queries transform real interface patterns. The same article component adapts seamlessly between main content and sidebar contexts.

Article Layout System
The same article component renders differently in main content vs sidebar — all via container queries, no prop changes.
CSS Tutorials

Mastering Container Queries

By Thomas Butler5 min read

Container queries revolutionise how we build responsive components...

“Container queries are the most requested CSS feature for over a decade!”

They finally allow us to create truly reusable components.

css

Pro Tips

Keep these guidelines in mind when using container queries in production.

Best Practices

Container Types

Use inline-size for horizontal queries, size for both dimensions. Most components only need inline-size.

Performance

Container queries have minimal performance impact. The browser optimises them efficiently — no need to worry about overhead.

Progressive Enhancement

Always provide sensible defaults. Container queries should enhance, not break, your layout. Use @supports where needed.