개요

CSS Grid Subgrid는 그리드 아이템이 부모 그리드의 트랙(행/열)을 그대로 상속받아 사용할 수 있게 하는 기능입니다. 2024년 주요 브라우저에서 모두 지원되면서 프로덕션에서 안심하고 사용할 수 있게 되었습니다.

기존 CSS Grid에서는 중첩된 그리드가 부모와 독립적인 트랙을 생성하여 정렬이 어긋나는 문제가 있었습니다. Subgrid는 이 문제를 근본적으로 해결하여, 카드 레이아웃의 제목-본문-푸터 정렬, 폼의 라벨-입력 필드 정렬 등 실무에서 자주 마주치는 레이아웃 과제를 깔끔하게 처리합니다.

핵심 개념

Subgrid의 핵심은 grid-template-rows: subgrid 또는 grid-template-columns: subgrid를 사용하여 자식 그리드가 부모의 트랙 정의를 그대로 이어받는 것입니다.

  • 행만 상속: grid-template-rows: subgrid로 부모의 행 트랙만 상속합니다.
  • 열만 상속: grid-template-columns: subgrid로 부모의 열 트랙만 상속합니다.
  • 양축 상속: 두 속성 모두 subgrid로 설정하면 행과 열 모두 상속합니다.
  • gap 재정의: subgrid 자체에 gap을 설정하면 부모의 gap을 재정의할 수 있습니다.
  • 영역은 부모 것: 부모에서 정의한 grid-template-areas의 이름도 subgrid에서 사용 가능합니다.

실전 예제

카드 컴포넌트에서 각 카드의 헤더, 본문, 푸터가 다른 카드와 동일한 높이로 정렬되는 예제입니다.

/* 부모 그리드: 3열 카드 레이아웃 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 각 카드는 3행 구조(헤더, 본문, 푸터) */
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
}

/* 각 카드: 부모의 행 트랙을 subgrid로 상속 */
.card {
  display: grid;
  grid-row: span 3;  /* 3행 차지 */
  grid-template-rows: subgrid;  /* 부모의 행 트랙 상속 */
  gap: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.card__header {
  padding: 1.5rem 1.5rem 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.card__body {
  padding: 0 1.5rem;
  color: #6b7280;
}

.card__footer {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid #f3f4f6;
  padding-top: 1rem;
}
<div class="card-grid">
  <article class="card">
    <h3 class="card__header">짧은 제목</h3>
    <p class="card__body">본문 내용입니다.</p>
    <footer class="card__footer">2025.01.15</footer>
  </article>
  <article class="card">
    <h3 class="card__header">긴 제목이 두 줄에 걸쳐 표시되는 카드</h3>
    <p class="card__body">더 긴 본문 내용...</p>
    <footer class="card__footer">2025.02.20</footer>
  </article>
  <article class="card">
    <h3 class="card__header">중간 제목</h3>
    <p class="card__body">중간 길이 본문.</p>
    <footer class="card__footer">2025.03.10</footer>
  </article>
</div>

활용 팁

  • 폼 레이아웃에 subgrid를 적용하면, 라벨과 입력 필드의 너비가 자동으로 정렬되어 깔끔한 폼을 만들 수 있습니다.
  • 테이블 대체: 의미론적으로는 테이블이 아니지만 시각적으로 표 형태가 필요할 때, Grid + Subgrid가 좋은 대안입니다.
  • Subgrid + Container Queries를 결합하면 정말 강력한 반응형 컴포넌트를 만들 수 있습니다.
  • Subgrid는 부모가 차지하는 트랙 수만큼만 상속받으므로 grid-row: span N이나 명시적 배치가 필요합니다.
  • DevTools에서 Grid 오버레이를 활성화하면 subgrid의 트랙 상속을 시각적으로 확인할 수 있습니다.

마무리

CSS Grid Subgrid는 중첩된 그리드 레이아웃에서 정렬 문제를 해결하는 결정적 기능입니다. 카드 컴포넌트, 폼, 대시보드 등 실무에서 자주 마주치는 레이아웃 패턴에서 코드를 크게 단순화시켜줍니다. 이제 브라우저 지원도 충분하니, 적극적으로 프로젝트에 도입해 보시기 바랍니다.