# CSS Subgrid로 구현하는 새로운 레이아웃

> Clean Markdown view of GeekNews topic #24642. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=24642](https://news.hada.io/topic?id=24642)
- GeekNews Markdown: [https://news.hada.io/topic/24642.md](https://news.hada.io/topic/24642.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-11-27T05:51:14+09:00
- Updated: 2025-11-27T05:51:14+09:00
- Original source: [joshwcomeau.com](https://www.joshwcomeau.com/css/subgrid/)
- Points: 12
- Comments: 1

## Summary

**CSS Subgrid**는 부모 그리드의 행·열 정의를 하위 요소까지 **상속**해, 중첩된 DOM 구조에서도 **일관된 레이아웃 정렬**을 가능하게 합니다. 기존 Grid가 직계 자식까지만 제어하던 한계를 넘어, 카드형 UI나 리스트 구조에서도 **형제 요소 간 균형 잡힌 배치**를 구현할 수 있죠. 다만 **행 예약**, **라인 번호 재설정**, **auto-fill 비호환성** 등 세밀한 제약이 있어 실무 적용 시 주의가 필요합니다. 브라우저 지원이 빠르게 확산 중이라, 지금부터 실험적으로 도입해보면 향후 **UI 설계 유연성**을 크게 확보할 수 있을 듯합니다.

## Topic Body

- **CSS Subgrid**는 기존 Grid의 한계를 넘어, 부모 그리드 구조를 하위 DOM 요소까지 **확장**할 수 있는 기능  
- 기존에는 **직계 자식만** 그리드에 참여할 수 있었으나, subgrid를 사용하면 `<ul>`·`<li>` 같은 중첩 구조도 동일한 **그리드 셀 배치** 가능  
- 콘텐츠 길이 차이로 발생하는 **형제 요소 간 불균형**을 해결하며, 각 카드나 섹션이 **동적으로 반응**하는 레이아웃 구성 지원  
- 다만 **행 예약 문제**, **라인 번호 재설정**, **auto-fill 기반 유동 그리드와의 비호환성** 등 주의할 점 존재  
- 주요 브라우저에서 지원되며, **점진적 도입**이 가능해 향후 **UI 설계 유연성**을 크게 높일 기술  

---

### Subgrid의 기본 개념
- 초기 CSS Grid는 **직접 자식 요소만** 레이아웃에 참여 가능  
  - 예시로, 포트폴리오 UI에서 `<ul>` 내부의 `<li>` 이미지들은 기본적으로 하나의 셀에 묶임  
- `grid-template-rows: subgrid`, `grid-template-columns: subgrid`를 사용하면 부모 그리드의 **행·열 정의를 상속**  
  - 각 `<li>`가 부모 그리드의 셀에 직접 배치되어 **의미론적 HTML 구조와 시각적 정렬**을 동시에 유지  
- 동일한 결과를 Flexbox와 중첩 Grid로도 구현 가능하지만, subgrid는 **단일 그리드 구조 공유**로 더 간결한 접근 제공  

### 새로운 레이아웃 가능성
- 포트폴리오 카드 예시에서 각 `<article>`이 **2열 그리드**를 가지며 이미지와 텍스트를 배치  
  - `fr` 단위는 유연하지만, 각 카드가 독립 계산을 수행해 **열 너비 불균형** 발생  
- `grid-template-columns: subgrid`를 적용하면 부모 그리드의 열 비율을 **모든 카드가 공유**  
  - 제목 길이 등 콘텐츠 변화에 따라 **전체 그리드가 자동 재조정**  
- 이 방식으로 형제 요소 간 **상호 인식형 레이아웃** 구현 가능  
  - 예: “Infinite Supercomputer” 제목을 줄이면 전체 카드의 이미지·텍스트 비율이 즉시 조정  

### Subgrid 사용 시 주의점 (Gotchas)

#### 행 공간 예약
- 열 공유는 직관적이지만, **행 공유 시 명시적 행 예약**이 필요  
  - 예: 가격표 카드에서 각 `<ul>`의 항목이 동일 행에 정렬되려면 `grid-row: span N`으로 **행 수 지정** 필요  
- subgrid는 기본적으로 **단일 셀만 차지**하므로, 여러 행을 사용하려면 먼저 **부모 그리드 영역 확장** 필요  

#### 중첩 그리드 번호
- subgrid는 부모의 **행·열 템플릿은 상속**하지만, **라인 번호는 재설정**  
  - 예: 부모의 2~5번 라인을 상속받아도 내부에서는 1~4로 다시 번호 매김  
  - 각 그리드는 자체 인덱스를 가지므로, **라인 번호는 고유 ID가 아닌 상대 인덱스**로 동작  

#### 유동 그리드와의 비호환성
- `repeat(auto-fill, minmax())` 형태의 **fluid grid**는 subgrid와 함께 사용 불가  
  - subgrid는 **정의된 열 수**가 필요하며, `auto-fill`·`auto-fit`은 지원되지 않음  
  - 작성자는 해당 조합의 해결책을 찾지 못했다고 명시  

#### 구형 브라우저 지원
- 2023년 이후 주요 브라우저에서 지원되지만, **지원율 90% 미만**  
- `@supports not (grid-template-columns: subgrid)` 조건문으로 **대체 레이아웃 제공** 가능  
  - 예: 이미지와 텍스트를 **세로 스택형**으로 배치하는 폴백 구조 제안  

### 실제 사례와 결론
- **Stripe 개발자 사이트(stripe.dev)** 는 전체 페이지를 하나의 대형 그리드로 구성하고, 여러 **subgrid 계층**을 통해 세밀한 배치 구현  
- subgrid는 대규모 레이아웃뿐 아니라 **소규모 UI 조정에도 유용**  
- 프로젝트 전체를 재구성할 필요 없이 **점진적 도입** 가능  
- CSS 레이아웃의 **새로운 유연성 확보 수단**으로, 실험적 활용 가치 높음

## Comments



### Comment 46848

- Author: neo
- Created: 2025-11-27T05:51:14+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=46047053) 
- Subgrid 기능이 정말 멋지지만, 첫 번째 간단한 예제에서는 `ul { display: contents }`로 자식들이 그리드 레이아웃에 참여하게 할 수도 있음  
  Subgrid 기능이 꼭 필요하지 않다면 이 방식이 더 **효율적**임  
  - 그 예제에서는 맞지만, 일반적으로 `display: contents`는 UL 요소를 레이아웃에서 완전히 제거함  
    그래서 스타일을 적용하거나 해당 요소에 **UI 이벤트**를 받을 수 없음  
    UL을 하이라이트 영역이나 스크롤 가능한 섹션으로 쓰고 싶다면 subgrid가 훨씬 유용함  
  - 두 번째 예제에서는 이미지의 너비를 일정하게 유지하려면 `fr` 대신 다른 단위를 쓰고, 텍스트에는 `fr`을 써서 남은 공간을 채우게 하면 됨

- 예전에 가격 비교 UI를 만들 때 subgrid가 없어서 정말 고생했음  
  두 개의 테이블을 나란히 두고 행을 맞추는 게 **불가능**했음  
  고정 높이나 JS 계산으로 해결할 수는 있었지만, React 컴포넌트 구조에서는 너무 비효율적이었음  

- Container queries가 더 나은 해결책 아닌가 생각했음  
  하지만 전체 그리드의 일관성을 유지하려면 subgrid가 더 적합할 수도 있음  
  참고로 [CodePen 예제](https://codepen.io/web-dot-dev/pen/rNrbPQw)를 보면 이해가 쉬움  
  - Container queries는 형제 요소 크기에 반응하는 문제를 해결하지 못함  
    게다가 container를 쓰면 새로운 **stacking context**가 생겨서 불편함  
    subgrid와 container를 함께 쓸 수 없다는 게 아쉬움. subgrid 크기를 자식이 참조할 수 있다면 정말 강력할 것 같음  

- “결국 <table> 레이아웃으로 돌아온 건가?”라는 생각이 듦  
  - 맞기도 하고 아니기도 함. 예전 <table>은 문제 해결용 **해킹**이었지만 접근성과 기술적 제약이 많았음  
    Grid 시스템은 시각적 배치를 위한 도구이지, 데이터 구조를 표현하는 테이블과는 다름  
    이제는 그리드가 표준으로 자리 잡았으니, 더 이상 테이블과 비교하지 않았으면 함  
  - 25년 전에는 서버에서 자동으로 테이블을 렌더링해서 레이아웃을 만들었는데, 그땐 정말 **쉽게 작동**했음  
    하지만 반응형이나 접근성은 전혀 고려되지 않았음. 결국 우리는 테이블을 다시 발명한 셈임  
  - <table>의 문제는 콘텐츠를 설명하는 구조였다는 점임. **그리드 자체는 문제 없음**  
  - 나도 “테이블은 표 데이터용이다”라는 말을 20년 넘게 들어왔음  
    결국 CSS가 그 기능을 개선된 형태로 다시 구현한 셈임  

- 예전에 겪은 **grid 버그** 중 하나는 `<img>` 요소를 퍼센트 단위로 크기 지정하면 셀 크기가 원본 이미지 크기로 왜곡되는 현상이었음  
  Firefox와 Chromium 모두에서 발생했고, 관련 버그는 [Mozilla Bug 1857365](https://bugzilla.mozilla.org/show_bug.cgi?id=1857365)에 있음  
  - 이미지에 고정된 width/height 속성을 주면 이 문제가 사라지는지 궁금함  

- CSS가 레이아웃을 위해 문서 구조 정보를 추가해야 하는 경우가 종종 있어서 아쉬움  
  예를 들어 행 개수를 명시해야 하는 점이 그렇음  
  - 이상적으로는 부모가 달라도 요소를 정렬할 수 있는 방법이 있었으면 함  
    혹은 한 flex 컨테이너가 다른 컨테이너의 **분포를 모방**할 수 있다면 좋겠음  
    하지만 그렇게 하면 DX가 복잡해질 가능성이 큼  

- 왜 코드 예제에서 HTML과 CSS 파일 둘 다에 스타일이 들어있는지 궁금했음  
  첫 번째 subgrid 예제의 CSS만 보고는 UL에 어떤 스타일이 적용됐는지 한참 찾았음  

- “결국 다시 grid로 돌아온 건가?”라는 생각이 듦  
  예전 HTML 시절에도 비슷한 걸 했었음  
  - 하지만 지금의 grid는 **반응형 디자인**을 훨씬 쉽게 만들어줌  
  - 물론, 이제는 스타일링 중에 **버그가 더 많아지는** 부작용도 있음 😅  

- Josh의 블로그 글은 항상 감탄스러움  
  글의 명료함, 디자인 감각, 인터랙티브한 웹사이트까지 모두 훌륭함  
  - 나도 그의 메일링 리스트 구독자임. 새 글이 올라올 때마다 기대됨  

- 개인적으로 grid는 여전히 다루기 불편함  
  문법도 어색하고 레이아웃 감각도 잘 안 맞음. **Flexbox**가 훨씬 직관적이고 유연함  
  - 두 기술은 문제 접근 방식이 다름  
    Flexbox는 콘텐츠 중심, Grid는 **컨테이너 중심**으로 크기를 제어함  
  - 나도 가끔 grid를 다시 시도하지만, 여전히 원하는 기능이 부족함  
    콘텐츠가 여러 축에 자동으로 맞춰지지 않고, 모든 걸 수동으로 배치해야 함  
    아마 내가 grid의 본질을 잘 못 이해했거나, 내 작업 유형과 맞지 않는 것 같음  
  - 반응형 디자인을 만들 때도 grid보다 flexbox가 훨씬 **단순함**