Container queries

Container queries vs media queries

Media queries tie layouts to viewport size. Container queries tie layouts to component container size. This makes components more reusable: the same card component adapts differently in a sidebar vs full width.

Using container queries

First, define a container. Then use @container to style children based on that container's width.

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

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

@container (max-width: 399px) {
  .card {
    display: block;
  }
}

Quick check: What's the advantage of container queries over media queries?

• Components adapt to their container, not viewport
• They're faster
• They work on all browsers