Container Queries

The problem: You have a card component that needs different layouts at different sizes. Media queries look at the viewport, but your card might be in a sidebar or full-width section.

The Solution

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

.card {
  display: grid;
  grid-template-columns: 1fr;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

Why Not Media Queries?

Media queries respond to the viewport. Container queries respond to the parent container. This means your component adapts to where it’s placed, not the screen size.

Quick Tip

Use container-type: inline-size for width-based queries. The size value also tracks height but has more performance overhead.