Responsive design is one of the most important parts of modern web development. For years, we used media queries to make layouts responsive. But media queries have one limitation:

They depend on the viewport size, not the size of the element.

To fix this problem, CSS introduced Container Queries — a game changer for building component-based, reusable UI.

In this article, let’s understand both, see the difference, and learn when to use which.

🔹 What is a Media Query?

A media query allows you to apply CSS based on the device or viewport size.
It reacts to screen width, height, orientation, or device type.

Example:

/* When screen is less than 768px */
@media (max-width: 768px) {
  .card {
    width: 100%;
    font-size: 16px;
  }
}

/* When screen is less than 768px */
@media (max-width: 768px) {
  .card {
    width: 100%;
    font-size: 16px;
  }
}

✔ Useful for page-level layouts
✔ Best for full-screen responsiveness
✔ Perfect for header, footer, grid layout adjustments

But:
❌ It cannot respond to the size of individual components.

If your card is inside a sidebar or a bigger section, media queries can’t detect the container size.

🔹 What is a Container Query?

A container query applies CSS based on the size of the parent container, not the screen.
This makes components fully reusable and independent.

Example:

/* Step 1: Declare a container */
.card-container {
  container-type: inline-size;
}

/* Step 2: Style card when container width changes */
@container (min-width: 500px) {
  .card {
    font-size: 20px;
    display: flex;
  }
}

/* Step 1: Declare a container */
.card-container {
  container-type: inline-size;
}

/* Step 2: Style card when container width changes */
@container (min-width: 500px) {
  .card {
    font-size: 20px;
    display: flex;
  }
}

✔ Component-level responsiveness
✔ More flexible than media queries
✔ Each component adapts based on where it is placed
✔ Perfect for component libraries, React, and design systems

🔥 Quick Comparison (Container Query vs Media Query)

🔍 Real Example to Understand the Difference

Scenario:

You have a Card component that appears in two places:

1. Inside a wide homepage section
2. Inside a narrow sidebar

With Media Query

You can’t detect the width of each container.
Both cards will look the same because the screen size is the same.

With Container Query

The card automatically adjusts based on its parent width.

Example:

/* Wide container */
.home .card-container {
  width: 700px;
}

/* Narrow container */
.sidebar .card-container {
  width: 300px;
}

/* Card responsive using container queries */
@container (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

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

/* Wide container */
.home .card-container {
  width: 700px;
}

/* Narrow container */
.sidebar .card-container {
  width: 300px;
}

/* Card responsive using container queries */
@container (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

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

👉 Same component, two different behaviours — fully automatic.

🧩 When to Use Media Query?

Use media queries when you want to adjust the overall layout:

✔ Page layout (grid, section spacing)
✔ Navigation collapse for mobile
✔ Hero banner responsiveness
✔ Full-width sections

Media queries = page-level control

🧩 When to Use Container Query?

Use container queries for individual components:

✔ Cards
✔ Sidebars
✔ Product boxes
✔ Blog preview widgets
✔ Navbar components
✔ Reusable design system components

Container queries = component-level control

🎯 Final Thoughts

Media queries are still useful — we can’t replace them completely.
But container queries bring a new level of flexibility and component-based design.

Media Query = Screen-based CSS
Container Query = Component-based CSS

If you’re building modern UI with Tailwind, React, Next.js, or component libraries, container queries help you create truly reusable, smart, and adaptive components.

HackerRank Guide – A Complete Roadmap for Beginners
CSS Processing Guide

CSS Grid Auto-Placement Guide

Arsalan

Arsalan Malik is a passionate Software Engineer and the Founder of Makemychance.com. A proud CDAC-qualified developer, Arsalan specializes in full-stack web development, with expertise in technologies like Node.js, PHP, WordPress, React, and modern CSS frameworks.

He actively shares his knowledge and insights with the developer community on platforms like Dev.to and engages with professionals worldwide through LinkedIn.

Arsalan believes in building real-world projects that not only solve problems but also educate and empower users. His mission is to make technology simple, accessible, and impactful for everyone.