06 — Subgrid & Masonry

이 문서가 답하는 질문: Subgrid는 중첩 그리드의 어떤 문제를 풀고, Masonry는 왜 아직 논쟁 중인가?

한 줄 답

Subgrid는 자식 그리드가 부모의 트랙 라인을 상속하게 해서, 중첩된 카드들 사이에서 정렬이 가능하게 만든 기능이다. 2024년 모든 evergreen에서 지원. Masonry(벽돌식)는 Pinterest 류 레이아웃을 CSS로 표현하려는 시도로, Grid에 흡수 vs 별도 모듈을 두고 Chrome/Safari 진영이 충돌 중이다.

Why — Subgrid가 푸는 문제

다음은 카드 리스트에서 흔히 나오는 디자인:

┌─────────────┬─────────────┬─────────────┐
│  Title 1    │  Title 2    │  Long Title │
│  (1 line)   │  (1 line)   │  (2 lines)  │
│             │             │             │
│  Body short │  Body long  │  Body med   │
│  Body long  │             │             │
│             │             │             │
│  [Action]   │  [Action]   │  [Action]   │
└─────────────┴─────────────┴─────────────┘

각 카드의 Title / Body / Action 영역이 카드들 사이에서 정렬되어야 한다. 카드를 각각 grid로 짜면 카드 내부 정렬은 되지만, 카드 간 정렬은 안 된다 — 각 카드가 독립 그리드라서.

부모에서 큰 그리드 하나로 짜면 카드 단위 스타일(border, padding, hover)이 어려워진다.

Subgrid가 이를 해결: 자식 카드가 부모 그리드의 행 라인을 그대로 따라간다.

How — Subgrid 문법

1) 기본

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto; /* title / body / action */
  gap: 16px;
}
 
.card {
  display: grid;
  grid-row: 1 / 4;                  /* 부모의 3행을 차지 */
  grid-template-rows: subgrid;       /* ★ 부모의 행 라인 상속 */
  gap: 0;                            /* 카드 내부는 gap 0 (부모 gap을 따름) */
}

핵심: **grid-template-rows: subgrid**가 부모의 그 축 트랙 라인을 그대로 사용. 자식 카드의 자식들은 부모의 행 라인 1, 2, 3을 직접 가리킨다.

2) 한 축만 subgrid 가능

.card {
  grid-template-columns: 60px 1fr;  /* 자체 컬럼 트랙 */
  grid-template-rows: subgrid;       /* 행만 부모 따라감 */
}

행과 열을 독립적으로 subgrid 여부를 정할 수 있다.

3) 이름 있는 라인 상속

.card-list {
  grid-template-rows:
    [title-start] auto
    [title-end body-start] 1fr
    [body-end action-start] auto
    [action-end];
}
.card {
  grid-template-rows: subgrid;
}
.card .title { grid-row: title-start / title-end; }

→ subgrid는 라인 이름까지 상속한다.

4) gap

subgrid는 부모의 gap을 그대로 쓴다. 자식의 gap은 추가된다 — 보통 자식 gap을 0으로 명시.

What — 사양과 호환성

Subgrid 사양

• CSS Grid Layout Module Level 2 — 2018 첫 초안, 2019 Firefox 첫 출시.
• 값: grid-template-rows: subgrid 또는 grid-template-columns: subgrid (둘 다 가능).
• 부모는 반드시 display: grid 또는 display: inline-grid.
• 자식의 해당 축 트랙은 직접 정의될 수 없다 — subgrid면 부모만 결정.

호환성 (2024 기준)

→ 2024년부터 Baseline newly available — 사실상 표준으로 채택 가능.

Masonry (실험)

벽돌 쌓듯 콘텐츠 높이별로 다음 행에 자동 packing되는 레이아웃.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry; /* ← 제안 단계 */
  gap: 16px;
}

Pinterest 류, 이미지 갤러리, 카드 리스트(다양한 높이)가 타깃.

두 진영의 충돌

Firefox 진영 (Mozilla, Apple WebKit):

• “Masonry는 Grid의 자연스러운 확장이다 — grid-template-rows: masonry 한 줄로 충분”.
• 이미 Firefox는 실험적으로 구현 (layout.css.grid-template-masonry-value.enabled 플래그).

Chrome 진영 (Google Blink):

• “Masonry는 Grid의 2D 정렬과 의미가 충돌한다 — 별도 display: masonry 모듈로 분리해야”.
• CSS Masonry Layout Module Level 3 제안.

2024년 현재 합의 없음. Safari 17.4가 Firefox 안을 따라 grid-template-rows: masonry를 출시했지만, Chrome은 별도 모듈로 가는 중.

실무 권장: 2025-2026에는 JS 라이브러리(Macy.js, Masonry.js) 또는 column-count로 우회, 또는 진영이 합의될 때까지 단순 Grid + auto-flow: dense로 대체.

중첩 그리드 패턴

subgrid 없이도 고정 트랙이면 중첩 그리드가 부분적으로 동작한다.

/* 카드 내부 row가 fixed면 카드간 정렬 가능 */
.card {
  display: grid;
  grid-template-rows: 40px 1fr 36px; /* 고정 — subgrid 불필요 */
}

→ 카드의 제목/푸터 높이가 일정하면 보통 충분. subgrid는 콘텐츠 가변 높이가 일치해야 할 때.

What-if — 잘못 쓰면

1) grid-template-rows: subgrid인데 정렬이 안 된다

원인:

• 부모가 display: grid가 아님.
• 자식의 grid-row가 부모의 트랙을 안 차지 (grid-row: 1 / 4 빠짐).
• 자식의 자식들이 명시적으로 그 라인에 배치되지 않음.

해결: 셋 다 확인. DevTools Grid inspector(Chrome/Firefox)로 부모 라인이 자식까지 이어지는지 시각화.

2) 카드 안의 gap이 두 배로 보인다

원인: subgrid는 부모 gap을 상속 + 자식 자체 gap이 더해짐.

해결: 자식 gap: 0 명시.

3) Masonry가 Chrome에서 안 보인다

원인: Chrome 미지원 (2026 기준 합의 진행 중).

해결: @supports (grid-template-rows: masonry)로 progressive enhancement, 또는 JS 라이브러리.

4) Subgrid를 IE/구형 브라우저에서 fallback

원인: subgrid는 Baseline 2024 — IE 등 구형 미지원.

해결: @supports feature query.

.card {
  display: grid;
  /* fallback: 고정 트랙 */
  grid-template-rows: 40px 1fr 36px;
}
@supports (grid-template-rows: subgrid) {
  .card { grid-template-rows: subgrid; }
}

5) Subgrid 안에 또 subgrid

가능하다. 손자 그리드가 조부모의 라인까지 상속된다 — 단, 부모도 subgrid여야 한다. 깊어질수록 디버깅이 어려워지므로 2단까지 권장.

Insight — Subgrid가 늦게 나온 이유, Masonry가 안 풀리는 이유

Subgrid는 Grid 1과 같이 2017년에 나올 뻔했다. 하지만 알고리즘 복잡도 때문에 분리됐다.

문제는 트랙 사이징 알고리즘이 자식까지 통합되어야 한다는 것. 자식 카드의 콘텐츠 폭이 부모 트랙 폭에 영향을 미쳐야 하므로, 부모→자식→부모 역방향 의존성이 생긴다. Chrome이 가장 늦게(2023) 출시한 이유.

Masonry의 충돌은 개념적 충돌이다.

Chrome 진영의 우려: Grid의 단순성을 깨고 동일 문법으로 다른 동작. Firefox 진영의 응답: Grid가 본래 다양한 동작을 한 우산으로 묶기 위한 모듈.

이 논쟁이 흥미로운 이유 — CSSWG의 의사결정 과정이 공개적으로 드러나는 드문 사례다 (대부분 합의가 빠르다). GitHub csswg-drafts #4650에 5년치 토론이 쌓여있다.

트리비아: column-count + break-inside: avoid로 CSS만으로 masonry 비슷한 효과를 낼 수 있다. 단, 항목 순서가 세로 우선이라 가로 흐름이 어색 — 보통 column-count는 텍스트 흐름에 적합, 카드 갤러리에는 어색.

요약 + Mermaid

• Subgrid = 자식 그리드가 부모 트랙 라인을 상속 — 카드 간 정렬 문제 해결.
• 2024년 Baseline — 모든 evergreen 지원.
• 한 축만 subgrid 가능 (rows: subgrid + columns: ...).
• Masonry는 Grid 확장 vs 별도 모듈 논쟁 중 — Chrome/Firefox 진영 충돌.
• 실무: subgrid는 채택, masonry는 보류 + 대체.

다음: 07-flexbox-vs-grid — 선택 기준과 함께 쓰는 패턴.