Blog CMS Kit

Published

1 min read219 words

## The Viewport Problem

Media queries respond to the viewport width. But components don't live in the viewport — they live in containers of varying sizes.

A sidebar card needs different styles than the same card in a main content area. Media queries can't distinguish between these contexts.

## Enter Container Queries

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

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

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

Now the card layout adapts to its container, not the viewport.

## Real-World Use Cases

1. **Dashboard widgets** — same component renders differently in 1-column vs 3-column grids
2. **Product cards** — horizontal in wide containers, vertical in narrow ones
3. **Navigation** — inline links collapse to a dropdown in narrow sidebars

## Container Query Units

New units relative to the container:

```css
.title {
  font-size: clamp(1rem, 3cqi, 2rem);
}
```

- `cqi` — 1% of container inline size
- `cqb` — 1% of container block size
- `cqmin` / `cqmax` — smaller/larger dimension

> **Tip:** Combine container queries with CSS Grid's auto-fit for truly fluid, container-aware layouts.

## Browser Support

Container queries are supported in all modern browsers since 2023. You can use them in production today with zero polyfills.