CSS Container Queries: Component-Level Responsive Design

Media queries check the viewport width. If you place a card in a sidebar (300px wide) or a main section (900px wide), you can't style the card based on its context — only on the viewport.

Container queries solve this: the card checks *its container's* width and adapts accordingly.

First, declare a containment context:

.card-container {
  container-type: inline-size;
  container-name: card; /* optional name */
}

Then query it:

@container card (min-width: 400px) {
  .card { flex-direction: row; }
  .card-image { width: 40%; }
}

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

Container queries introduce new relative units:

- `cqw` — 1% of container width - `cqh` — 1% of container height - `cqi` — 1% of container inline size - `cqb` — 1% of container block size

@container (min-width: 600px) {
  .card-title { font-size: clamp(1rem, 3cqi, 2rem); }
}