14장. Container Query

Media Query는 viewport, Container Query는 component가 놓인 공간에 반응한다. 같은 task board가 full page, dashboard widget, CMS column에 들어갈 때 component가 스스로 적응해야 한다.

.board { container: board / inline-size; }
@container board (max-width: 38rem) {
  .cards, .metrics { grid-template-columns: 1fr; }
}

container를 너무 많이 만들면 containment의 layout·size 영향과 디버깅 비용이 커진다. 재사용 경계에만 이름을 붙인다. container query unit인 cqi도 fluid type에 쓸 수 있지만 과도한 변화는 읽기를 방해한다.