같은 카드 컴포넌트가 메인에서는 넓고, 사이드바에서는 좁게 들어갑니다. 그런데 미디어쿼리는 화면 전체 폭만 보기 때문에, 사이드바에 넣은 카드까지 가로 배치로 깨지는 경우가 많습니다.
CSS 컨테이너 쿼리(@container)를 쓰면 “이 카드가 들어 있는 박스의 폭”을 기준으로 레이아웃을 바꿀 수 있습니다. 크롬·엣지 105+, 사파리 16+, 파이어폭스 110+에서 쓸 수 있습니다.

1. 부모에 container-type 지정하기

먼저 크기를 재고 싶은 감싸개에 container-type: inline-size를 둡니다. 이름이 여러 개면 container-name을 같이 적어 두면, 나중에 @container 이름 (…)으로 골라 쓸 수 있습니다.

/* 카드가 들어가는 칸 */
.card-slot {
  container-type: inline-size;
  container-name: card;
}

/* 짧게 쓰는 단축형 */
.card-slot {
  container: card / inline-size;
}

2. @container로 카드 안 레이아웃 바꾸기

카드가 넓을 때는 이미지·텍스트를 가로로, 좁을 때는 세로로 쌓습니다. 조건은 뷰포트가 아니라 가장 가까운 컨테이너 폭입니다. 같은 HTML을 메인·사이드바에 깨짐 없이 재사용할 수 있습니다.

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@container card (min-width: 360px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card img {
    width: 40%;
    flex-shrink: 0;
  }
}

3. 실무에서 자주 하는 실수

container-type을 카드 자기 자신에만 두면, 자기 폭을 자기 스타일로 바꾸는 순환이 생기기 쉽습니다. 측정은 부모, 스타일 변경은 자식으로 나누는 편이 안전합니다. 또한 display: contents인 요소는 박스가 없어 컨테이너가 되지 않습니다.