Container Queries in CSS: The End of Media Queries? 📦

Let us be honest: Media Queries were never really what we needed. Sure, they work, but they respond to the viewport size, not to the size of the component itself. And that has always been the problem. You build a beautiful card component that should look completely different in the sidebar than in the main content, and then the hacking begins. But now? Now we have Container Queries. And they change everything. 🚀

Container Queries respond to the size of the parent container instead of the viewport. Perfect for reusable components. Media Queries remain relevant for global layouts. Best approach: combine both.

The Problem with Media Queries 🤔

Media Queries are based on the viewport width. That means: your component does not know how much space it actually has. An example:

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

This works, as long as your card always takes up the full viewport width. But what if it sits in a sidebar that is only 300px wide? Then the breakpoint does not trigger, even though the card should actually wrap.

That is the core problem: Media Queries do not know about the container.

Container Queries to the Rescue! 🦸

Container Queries solve exactly this problem. Instead of looking at the viewport, the component responds to the size of its parent container. Here is how you define it:

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

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

This is a game changer. Your card now responds to its actual available space, not the viewport. Whether it is in a sidebar, modal, or full-width, it always adapts correctly.

How Container Queries Work in Detail 🔧

There are two important properties:

container-type: Defines that an element serves as a container. Values: inline-size (width), size (width + height), normal (default).
container-name: Gives the container a name so you can target it specifically.

There is also a shorthand:

.wrapper {
  container: card / inline-size;
}

Practical Example: Responsive Card 🎨

Let us look at a complete example:

<div class="card-container">
  <article class="card">
    <img src="thumbnail.jpg" alt="Thumbnail" class="card-image" />
    <div class="card-content">
      <h3>Article Title</h3>
      <p>A short description of the article.</p>
    </div>
  </article>
</div>

.card-container {
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.card-image {
  width: 200px;
  object-fit: cover;
  border-radius: 8px;
}

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

  .card-image {
    width: 100%;
    height: 200px;
  }
}

The card automatically switches from horizontal to vertical as soon as its container is less than 500px wide. Regardless of the viewport width.

Container Queries vs. Media Queries, The Comparison 🔍

	Media Queries	Container Queries
Responds to	Viewport size	Container size
Scope	Global	Local (per component)
Reusable	Limited	Very good
Nesting	Not possible	Possible
Browser support	All	All modern browsers

Container Query Units, Even More Power 💪

Container Queries also come with their own units:

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

.card-title {
  font-size: clamp(1rem, 4cqi, 2rem);
}

This makes the font size dynamically adapt to the container size. It does not get more responsive than that!

Are Media Queries Dead Now? ☠️

Short answer: No. Media Queries still have their place. For global layout changes, when the entire page layout changes, they are still the right tool. Think of:

Navigation: Hamburger menu on mobile vs. horizontal nav on desktop
Global grid layouts: 3 columns on desktop, 1 column on mobile
Print styles

Container Queries, on the other hand, are perfect for component-level responsiveness. The two complement each other perfectly:

/* Global: Media Query */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

/* Component: Container Query */
@container (max-width: 400px) {
  .card {
    flex-direction: column;
  }
}

Browser Support 🌍

Container Queries are now supported by all modern browsers, Chrome, Firefox, Safari, and Edge. IE is out, of course, but nobody uses that anymore anyway. 😅

So you can start using them right away!

My Verdict 🎯

Container Queries are what we have been waiting for, for years. They finally make component-based CSS truly possible. No more hacking around with breakpoints that do not really fit. No more workarounds with ResizeObserver in JavaScript.

My advice: Use both. Media Queries for global layouts, Container Queries for components. Your CSS will be cleaner, more maintainable, and, let us be honest, more elegant too. ✨

Here are some useful resources: MDN: Container Queries and Can I Use: Container Queries.

Have you used Container Queries in a project yet? I would love to hear about your experiences, drop a comment below! 👇