CSS Container Queries: A Game Changer

For years, we've relied on viewport-based media queries. Container queries change everything.

$2

Container queries allow you to style elements based on their container's size, not the viewport:

.card-container {
  container-type: inline-size;
  container-name: card;
}
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

$2

Components can now be truly self-contained and responsive. A card component will adapt whether it's in a sidebar or main content area.

$2

As of 2024, container queries are supported in all major browsers!

This is the future of responsive design.