CSS Academy · Lesson

Container Queries vs Media Queries

Understand when to use container queries versus viewport media queries for component-based design.

Container Queries vs Media Queries is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Fundamental Difference

Media queries respond to the viewport dimensions. Container queries respond to the parent container dimensions. This distinction determines which tool to use for which problem.

Media Queries: When to Use

Use media queries for:

Global page layout changes (one vs two columns)
Showing/hiding large page sections (navigation drawer on mobile)
Page-level typography baseline scaling
Print styles
User preference queries (dark mode, reduced motion)

Container Queries: When to Use

Use container queries for:

Component-level layout changes (card horizontal vs vertical)
Components placed in unknown containers (sidebar, main, sidebar-within-main)
Reusable design system components
Widgets embedded in third-party pages

The Portability Argument

A card styled with media queries works at one breakpoint on a 1200px-wide page. If that card is moved to a sidebar, it may need different breakpoints. With container queries, the same card just works — it adapts to its own available space.

Combined Usage

Real applications use both. Media queries define the macro layout (sidebar exists at desktop widths); container queries define component behavior within that layout.

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

.sidebar { container-type: inline-size; }
.main-content { container-type: inline-size; }

@container (min-width: 500px) {
  .card { flex-direction: row; } /* responds to its column's width */
}

Specificity of Container Queries

Unlike media queries (which add no specificity), container queries do add context-specificity. A rule inside @container (min-width: 400px) has the same specificity as the same rule outside — but it only applies within that container context.

Browser Support

Container queries are supported in all modern browsers since 2023 (Chrome 105+, Firefox 110+, Safari 16+). They are safe to use in new projects today without fallbacks for modern browser targets.

Progressive Enhancement with @supports

For projects requiring older browser support, use @supports to test container query support:

@supports (container-type: inline-size) {
  .card-wrapper {
    container-type: inline-size;
  }

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

Performance Comparison

Container queries have their own performance characteristics: each container-type element creates a layout containment boundary. This prevents size changes inside from affecting the outside — which is actually a performance benefit. Media query changes can trigger global layout recalculations.

Debugging Container Queries

Chrome DevTools shows a "cq" badge next to container elements in the Elements panel. Click it to visualize the container boundaries and test container query conditions with DevTools's layout inspector.

Quick Check

A design system card component needs to switch from a stacked layout to a side-by-side layout depending on available width in any context. Which approach is better?

Recap

Media queries respond to the global viewport; container queries respond to a parent container's size. Use media queries for global layout decisions and user preference queries. Use container queries for reusable components that need to adapt to their context. Combine both: media queries for the macro page layout, container queries for component-level adaptation within that layout.

Frequently asked questions

Is the “Container Queries vs Media Queries” lesson free?

Yes — the full text of “Container Queries vs Media Queries” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Container Queries vs Media Queries”?

Understand when to use container queries versus viewport media queries for component-based design. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Container Queries vs Media Queries” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy