Что такое container queries в CSS?

Question

Accepted Answer

## В чём суть

**Container queries** позволяют стилизовать элемент **относительно размера ближайшего контейнера**, а не viewport (в отличие от media queries).

Шаги:

1. На родителе: `container-type: inline-size` (или `size`) и опционально `container-name`.
2. У потомка: `@container (min-width: …) { … }`.

```css
.card {
  container-type: inline-size;
  container-name: card;
}
@container card (min-width: 400px) {
  .card__body { display: grid; grid-template-columns: 1fr 1fr; }
}
```

Идеально для дизайн-систем: одна карточка в сайдбаре и в основной колонке ведёт себя по-разному без знания ширины экрана.

Есть также style queries (`@container style(…)`) — проверка кастомных свойств контейнера (поддержка растёт).