CSS Container Queries Changed How I Think About Layout

For years, responsive design meant one thing: media queries. You’d check the viewport width and adjust layouts accordingly. It worked, but it had a fundamental problem — components didn’t know about their own size, only the page’s size.

The problem with media queries

Consider a card component. In a sidebar, it’s 300px wide. In the main content area, it’s 600px. With media queries, you’d write breakpoints based on the viewport, but the card doesn’t care about the viewport — it cares about its own container.

/* Old way — viewport-based */
@media (min-width: 768px) {
  .card { flex-direction: row; }
}

Enter container queries

Container queries let you style elements based on their parent’s size:

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

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

Now the card responds to its own context, not the page. This is a game-changer for component-based design.

Browser support

As of 2024, container queries have excellent support across all modern browsers. There’s no reason not to use them in production today.

Key takeaway

Think in components, not pages. Container queries align CSS with how we already think about building UIs — in isolated, reusable pieces.