CSS Container Queries로 진짜 반응형 만들기

미디어 쿼리는 뷰포트 크기를 기준으로 스타일을 바꿉니다. 하지만 컴포넌트는 뷰포트가 아닌 자신이 놓인 컨테이너 크기에 반응해야 합니다.

기본 사용법

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

이제 .card는 뷰포트가 아닌 .card-wrapper의 너비를 기준으로 레이아웃이 바뀝니다.