# Container queries — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/container-queries

> Style components based on container width, not viewport — future of responsive design.

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

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

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

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

**Quiz:** What's the advantage of container queries over media queries?

- [x] Components adapt to their container, not viewport
- [ ] They're faster
- [ ] They work on all browsers

*Answer:* Components adapt to their container, not viewport. Container queries make reusable components that adapt anywhere.