들어가며

---

현대 웹 개발에서 CSS는 단순한 스타일링 도구를 넘어 사용자 경험(UX)과 개발 효율성을 높이는 중요한 역할을 합니다. 특히 최근 도입된 CSS Subgrid와 Container Queries는 복잡한 디자인 요구사항을 간결하고 유연하게 해결할 수 있도록 돕는 최신 기능입니다.

하지만 처음 접하면 기존 Grid/Flexbox, Media Queries와 뭐가 다른지 헷갈릴 수 있습니다. 이번 글에서는 Subgrid와 Container Queries가 기존 방식과 어떻게 다른지, 어떤 장점이 있는지 비교해보겠습니다.

 

1. CSS Subgrid: 부모-자식 레이아웃의 일관성

---

1.1 기존 Grid/Flexbox와의 차이 

기존 Grid/Flexbox	Subgrid
부모와 자식의 레이아웃이 서로 독립적	부모의 Grid 레이아웃을 자식이 그대로 상속
자식 요소 정렬을 따로 맞춰야 함	부모 변경 시 자식도 자동으로 정렬 유지
복잡한 레이아웃에서 일관성 유지 어려움	부모-자식 레이아웃 일관성 쉽게 유지

기존 CSS Grid와 Flexbox로 레이아웃을 구성하면, 부모와 자식의 레이아웃이 독립적으로 설정됩니다. 따라서 부모 그리드의 열(Column)에 맞춰 자식 요소들을 정렬하려면, 자식들도 따로 그리드 설정을 해야 하는 번거로움이 있었습니다.

Subgrid는 자식 요소가 부모의 Grid 설정을 그대로 상속받아 정렬되는 방식입니다. 따라서 부모 레이아웃이 변경되면 자식도 자동으로 맞춰지는 일관성을 유지할 수 있습니다.

다만, Subgrid 방식에서도 부모의 grid-template-columns가 바뀌면 자식의 grid-column 설정도 함께 바뀔 수 있습니다. 그러나 부모와 자식이 같은 기준으로 맞춰지기 때문에, 눈대중으로 위치를 맞추는 수작업이 줄고, 레이아웃 변경이 훨씬 명확해집니다.

 

1.2 코드 비교로 보는 차이점

공통 HTML 구조

<div class="parent-grid">
  <div class="item">
    <div class="title">제목</div>
    <div class="desc">설명</div>
  </div>
  <div class="item">
    <div class="title">제목</div>
    <div class="desc">설명</div>
  </div>
</div>

 

기존 Grid/Flexbox 방식 (부모-자식 레이아웃 따로 맞춤, 번거로움)

/* 초기 설정: 부모 그리드는 3개의 열로 구성됨 (1fr, 2fr, 1fr 비율) */
.parent-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

/* 자식 내부도 별도로 레이아웃 설정 (부모와 별개로 1fr, 2fr 비율로 설정) */
.item {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.title { grid-column: 1; }
.desc { grid-column: 2; }

/* 부모 레이아웃 변경 시 (예: 1fr 1fr 1fr 1fr로 변경) */
.parent-grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* 자식 내부 레이아웃도 변경 필요 (부모 변경과 일일이 맞춰줘야 함) */
.item {
  grid-template-columns: 1fr 3fr;
}

 

Subgrid 방식 (부모 레이아웃 상속받아 일관성 유지)

/* 초기 설정: 부모 그리드는 3개의 열로 구성됨 (1fr, 2fr, 1fr 비율) */
.parent-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

/* 자식도 부모의 grid 설정을 그대로 따름 (subgrid 키워드로 상속) */
.item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3; /* 부모의 3개 열을 모두 차지하도록 설정 */
}

.title { grid-column: 1; }
.desc { grid-column: 2; }

/* 부모 레이아웃 변경 시 (예: 1fr 1fr 1fr 1fr로 변경) */
.parent-grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* 자식 내부는 변경할 필요 없음 → 부모의 변경사항을 그대로 반영 */

 

➡️ 차이점 요약

• 기존 방식: 자식마다 따로 grid 설정 필요 → 복잡, 부모 변경 시 자식도 일일이 수정해야 함

• Subgrid: 부모 레이아웃 상속 → 부모 변경만 하면 자식도 자동 적용, 수정 부담 감소

 

2. CSS Container Queries: 컴포넌트 중심의 반응형 디자인

---

2.1 기존 Media Queries와의 차이

기존 Media Queries	Container Queries
화면(Viewport) 크기를 기준으로 스타일 변경	부모(Container) 요소의 크기를 기준으로 스타일 변경
컴포넌트마다 뷰포트 기준으로 대응해야 함	각 컴포넌트가 자신의 부모 크기에 맞춰 유연하게 대응
전체 페이지 기준으로 반응형 설계	모듈형 컴포넌트 제작에 유리

 

1.2 코드 비교로 보는 차이점

공통 HTML 구조

<div class="card-container">
  <div class="card">
    <h3 class="card-title">제목</h3>
    <p class="card-content">이곳에 내용이 들어갑니다.</p>
  </div>
  <div class="card">
    <h3 class="card-title">제목</h3>
    <p class="card-content">다른 카드 내용입니다.</p>
  </div>
</div>

 

기존 Media Queries 방식 (뷰포트 기준, 컴포넌트 재사용 어려움)

/* 부모 컨테이너 크기와 관계없이, 뷰포트 크기를 기준으로 스타일 적용 */
.card {
  padding: 16px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  font-size: 14px;
}

@media (min-width: 768px) {
  .card { 
    font-size: 18px; /* 화면 크기가 768px 이상이면 폰트 크기 증가 */
    padding: 24px;
  }
}

 

Container Queries 방식 (부모 크기 기준, 컴포넌트 유연성 증가)

/* 부모 컨테이너 크기에 따라 유동적으로 반응하는 디자인 적용 */
.card-container {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  container-type: inline-size; /* Container Queries 활성화 */
}

.card {
  border: 1px solid #ccc;
  padding: 16px;
  background: #f0f0f0;
  flex: 1 1 300px; /* 최소 300px을 유지하면서 크기에 맞춰 조정 */
}

@container (min-width: 350px) {
  .card {
    font-size: 16px;
    padding: 20px;
  }
  .card-title {
    font-size: 20px; /* 부모 컨테이너 크기가 350px 이상이면 제목 폰트 크기 증가 */
  }
}

@container (min-width: 500px) {
  .card {
    font-size: 18px;
    padding: 24px;
  }
  .card-content {
    font-size: 16px; /* 부모 컨테이너 크기가 500px 이상이면 내용 폰트 크기 증가 */
  }
}

 

3. Subgrid와 Container Queries를 함께 활용한 대시보드형 컴포넌트 예제

---