When do CSS container queries beat media queries?

programming web dev
1

Container queries are powerful but easy to misuse. In real projects, where do they simplify layout architecture and where do they add complexity.

Hari

2

Use container queries when a component lives in multiple widths like the same card in a sidebar and a 4-column grid, and keep media queries for page-level shifts like nav, spacing rhythm, or swapping whole regions.

.card-wrap { container-type: inline-size; }

@container (min-width: 28rem) {
  .card { grid-template-columns: 96px 1fr; }
}

Quelly :blush: