Container Queries vs Media Queries — Complete Comparison

Container Queries vs Media Queries

Both features enable responsive design, but they respond to different things and serve different purposes.

Side-by-Side Comparison

Feature	Media Queries	Container Queries
Responds to	Viewport/window size	Parent container size
Scope	Global	Component-level
Reusability	Breaks in different contexts	Works everywhere
Browser support	Universal	Modern browsers (2022+)
Syntax	@media	@container
Setup	None required	container-type on parent

When to Use Media Queries

• ✅ Page-level layout changes (e.g., sidebar appears/disappears)
• ✅ Global typography scaling
• ✅ Print stylesheets
• ✅ User preference detection (dark mode, reduced motion)
• ✅ When you need broadest browser support

When to Use Container Queries

• ✅ Component-level layout changes
• ✅ Reusable components that appear in different contexts
• ✅ Design systems and component libraries
• ✅ When the same component exists in sidebar AND main content
• ✅ Widget-based or CMS-driven layouts

Using Both Together

/* Page layout: media query */
@media (min-width: 1024px) {
  .page {
    display: grid;
    grid-template-columns: 300px 1fr;
  }
}

/* Component layout: container query */
.card-area {
  container: cards / inline-size;
}

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

The media query controls the overall page structure. The container query controls how individual cards render based on their available space. When the sidebar appears (narrowing the main area), cards automatically adapt.

Migration Strategy

You do not need to replace all media queries with container queries. Start with reusable components that appear in multiple layout contexts.