# Container queries — Responsive and Mobile-First Web Design

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

> Style components by their container width instead of the viewport, so one card or widget adapts in any layout.

## 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;
  }
}
```

Quick check

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

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

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