CSS Grid Level 2 서브그리드(subgrid) 트랙 상속과 중첩 레이아웃 정렬

일반적인 중첩 그리드는 자체 트랙을 계산하므로 부모 그리드와 내부 항목의 행·열 정렬이 자동으로 공유되지 않습니다. CSS Subgrid는 지정한 축에서 자식 그리드가 부모 트랙을 공유하게 하는 기능입니다. 이는 중첩 컴포넌트의 정렬을 맞추는 데 유용할 수 있지만 모든 레이아웃 문제나 브라우저 호환성 문제를 해결하거나 성능 향상을 보장하지는 않습니다.

배치 관계를 나타낸 개념 이미지이며, 아래 HTML·CSS 예제의 실행 화면이나 브라우저 캡처가 아닙니다.

1. `grid-template-columns: subgrid` 선언과 트랙 공유

Subgrid는 자식 그리드가 지정한 행 또는 열 축에서 부모 그리드의 트랙을 공유하도록 합니다. 부모에서 자식이 차지하는 span이 범위를 정하고, 해당 축의 자식 항목은 부모의 트랙 크기 산정에 참여할 수 있습니다. 독립된 중첩 그리드와 달리 내부 항목을 부모의 기준선에 맞출 수 있지만, 모든 항목을 자동으로 같은 위치에 두는 기능은 아닙니다. 배치 결과는 부모의 트랙 정의, 자식의 span, 콘텐츠 크기에 따라 달라집니다.

2. 부모 트랙 크기 계산, 간격과 이름 있는 선

Subgrid는 자식 그리드가 부모에서 차지한 범위(span)의 행 또는 열을 가져와 지정한 축의 트랙으로 사용합니다. 따라서 같은 축에서 자식이 별도의 트랙 크기 목록을 다시 계산하는 방식과 다릅니다. W3C 규격은 자식 항목의 내용 기반 크기 정보가 공유된 부모 트랙의 고유 크기 계산에 참여할 수 있다고 설명합니다. 부모의 트랙 규칙이 아래로 전달되고 자식 콘텐츠의 크기 정보가 부모 계산에 반영될 수 있는 구조입니다.

부모의 행·열 gap은 기본적으로 이어지며, 자식에서 row-gap이나 column-gap으로 다시 지정할 수 있습니다. 공유된 부모 선은 자식에서 참조할 수 있고, 규격은 자식의 선 이름 목록을 줄별로 추가하는 방법도 정의합니다. 반대로 Subgrid 축에는 자식 전용 암시적 트랙이 생기지 않습니다. 자동 배치 항목 수가 부모가 제공한 범위를 넘는 경우에는 실제 배치 결과와 넘침을 확인해야 합니다.

예를 들어 여러 카드에 제목과 설명을 같은 행 구조로 배치하려면 부모가 각 카드에 필요한 행 span을 제공하고, 카드가 그 행 축을 Subgrid로 선언해야 합니다. 제목 길이가 달라도 콘텐츠의 크기 정보가 공유 트랙 계산에 반영될 수 있지만, 부모 span이 다르거나 자식 항목을 다른 선에 배치하면 기대한 정렬이 나오지 않을 수 있습니다. 축과 배치 규칙을 먼저 맞춘 뒤 긴 문구와 이미지가 포함된 실제 자료로 확인하는 편이 안전합니다.

3. 두 행을 공유하는 최소 예와 확인 기준

다음 예는 각 카드가 제목과 설명 두 행을 차지하도록 부모에 놓고, 카드 내부에서 그 행을 공유합니다. 긴 제목이 첫 번째 공유 행의 크기에 반영되면 두 카드의 설명 행이 같은 시작선에 맞춰집니다.

<style>
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.card {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 0.5rem;
  min-width: 0;
}
.card h2, .card p { margin: 0; }
@media (max-width: 38rem) {
  .cards { grid-template-columns: 1fr; }
}
</style>
<div class="cards">
  <article class="card">
    <h2>도심 문화 산책</h2>
    <p>역사 거리와 작은 전시 공간을 둘러봅니다.</p>
  </article>
  <article class="card">
    <h2>강변 생태와 계절 변화를 관찰하는 긴 코스</h2>
    <p>하천 주변의 식생과 보행로를 살펴봅니다.</p>
  </article>
</div>

현재 Chrome에서 EN 원문 HTML 예제를 확인했습니다. 720px에서는 제목이 3줄인 카드가 있어도 두 설명의 시작선이 모두 101.5px였고 문서 가로 넘침은 없었습니다. 390px에서는 카드가 y=8px와 y=80px에 세로로 놓였고 문서 scrollWidth는 390px였습니다. 이는 이 EN 예제의 해당 두 폭에 대한 확인이며 KO/JA 예제, 다른 브라우저, 다른 텍스트까지 검증한 결과는 아닙니다. 예상 동작과 긴 제목·좁은 폭 점검은 별도로 구분하세요. Subgrid를 지원하지 않는 환경에는 별도 레이아웃을 준비합니다.

참고 문헌 및 자료 출처

• CSS Grid Layout Module Level 2 | W3C
• Subgrid - CSS | MDN