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. 🚀

TL;DR: 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.

Why CSS Flexbox can solve your layout problems🧑‍💻

Learn how Flexbox can revolutionize your web design and why it's better than old layout methods! Perfect for responsive designs 🎨

Disane.dev - Tech blogMarco Franke

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.

CSS variables: Flexible styling for your components 🎨

CSS variables make your styling more flexible 🎯 In this guide, I'll explain how to use, scope and override them in components! 🌈

Disane.dev - Tech blogMarco Franke

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 🔍

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!

Size specifications in CSS: A developer's joys and sorrows 🎨

A comprehensive guide to the different sizing units in CSS and their applications. Learn the pros and cons and improve your design! 🎨

Disane.dev - Tech blogMarco Franke

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!

Intersection Observer: A powerful tool for efficient web design 🚀

Discover how the Intersection Observer makes your websites more efficient and why it should be an indispensable tool in your arsenal! 🚀

Disane.dev - Tech blogMarco Franke

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! 👇