intermediate

Container queries

Адаптируйте компоненты к размеру или стилю контейнера, а не только страницы к viewport.

Container queries позволяют компоненту адаптироваться к ширине или стилю слота, а не viewport. Объявите query container и пишите правила `@container`.

					.card-slot {
  container-type: inline-size;
  container-name: card;
}
.card {
  display: grid;
  grid-template-columns: 1fr;
}
@container card (min-width: 24rem) {
  .card { grid-template-columns: 6rem 1fr; }
}

`container-type: inline-size` — запросы по ширине; `size` включает block size, но тяжелее. Containment влияет на percentages — тестируйте в sidebar, grid и embed.

На интервью: зачем переиспользуемым карточкам container queries и как containment меняет sizing.

Типовые ошибки: забытый `container-type`; дублирование обязанностей page shell, которые лучше в media queries.

Компромисс: переносимые компоненты против дополнительной осознанности containment у родителей.

Чеклист:

container-type на обёртке слота.
Запросы на границах компонента.
Media queries для каркаса страницы.
Тест в узком и широком родителе.