CSS Container Queries 실전 패턴

Container Queries 기본

부모 컨테이너의 크기에 따라 자식 레이아웃을 변경합니다. 미디어 쿼리와 달리 뷰포트가 아닌 컨테이너 기준입니다.

container-card.css

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}
 
.card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}
 
/* 컨테이너 너비가 400px 이상일 때 */
@container card (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
    padding: 1.5rem;
  }
}
 
/* 컨테이너 너비가 600px 이상일 때 */
@container card (min-width: 600px) {
  .card {
    grid-template-columns: 280px 1fr;
    padding: 2rem;
    gap: 1.5rem;
  }
}

스타일 쿼리 (실험적)

CSS 커스텀 프로퍼티 값에 따라 스타일을 조건부 적용할 수 있습니다.

style-query.css

.theme-wrapper {
  container-type: normal;
  --theme: light;
}
 
@container style(--theme: dark) {
  .content {
    background: #1a1a1a;
    color: #fafafa;
  }
}