CSS Container Queries: Component-Level Responsiveness

For years, responsive design meant responding to the viewport width with media queries. Container queries change that — components can now respond to the size of their own container.

The problem with media queries

Imagine a card component used in a three-column sidebar and a full-width content area. With media queries, both instances respond to the same viewport width, making it impossible to style them independently.

/* This applies to ALL .card elements at this viewport width */
@media (min-width: 768px) {
  .card { flex-direction: row; }
}

Container queries to the rescue

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

Now the card layout responds to its wrapper's width — not the viewport. The same card in a narrow sidebar stays vertical while the same card in a wide content area goes horizontal.

Browser support

Container queries are now baseline available in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). You can use them in production without polyfills.

Named containers

For nested layouts, you can name containers:

.sidebar { container: sidebar / inline-size; }
.main { container: main / inline-size; }

@container sidebar (min-width: 200px) { ... }
@container main (min-width: 600px) { ... }

When to use them

Container queries are ideal for:

• Design system components that need to work in any context
• Card components used in varying grid widths
• Any component that is "layout-agnostic"

오랫동안 반응형 디자인은 미디어 쿼리로 뷰포트 너비에 반응하는 것을 의미했습니다. 컨테이너 쿼리는 이를 바꿉니다 — 컴포넌트가 이제 자신의 컨테이너 크기에 반응할 수 있습니다.

미디어 쿼리의 문제

3열 사이드바와 전체 너비 콘텐츠 영역 모두에서 사용되는 카드 컴포넌트를 상상해보세요. 미디어 쿼리로는 두 인스턴스가 동일한 뷰포트 너비에 반응하기 때문에 독립적으로 스타일을 지정하는 것이 불가능합니다.

컨테이너 쿼리로 해결

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

이제 카드 레이아웃은 뷰포트가 아닌 래퍼의 너비에 반응합니다. 좁은 사이드바에 있는 동일한 카드는 수직으로 유지되고, 넓은 콘텐츠 영역에 있는 동일한 카드는 수평으로 표시됩니다.

브라우저 지원

컨테이너 쿼리는 이제 모든 최신 브라우저(Chrome 105+, Firefox 110+, Safari 16+)에서 기본적으로 사용 가능합니다.

언제 사용할까

컨테이너 쿼리는 다음과 같은 경우에 이상적입니다:

• 어떤 컨텍스트에서도 작동해야 하는 디자인 시스템 컴포넌트
• 다양한 그리드 너비에서 사용되는 카드 컴포넌트
• "레이아웃 불가지론적"인 모든 컴포넌트