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

• 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 레이아웃의 새로운 유연성 확보 수단으로, 실험적 활용 가치 높음

[GN⁺]

Hacker News 의견

• Subgrid 기능이 정말 멋지지만, 첫 번째 간단한 예제에서는 ul { display: contents }로 자식들이 그리드 레이아웃에 참여하게 할 수도 있음
  Subgrid 기능이 꼭 필요하지 않다면 이 방식이 더 효율적임

  • 그 예제에서는 맞지만, 일반적으로 display: contents는 UL 요소를 레이아웃에서 완전히 제거함
    그래서 스타일을 적용하거나 해당 요소에 UI 이벤트를 받을 수 없음
    UL을 하이라이트 영역이나 스크롤 가능한 섹션으로 쓰고 싶다면 subgrid가 훨씬 유용함
  • 두 번째 예제에서는 이미지의 너비를 일정하게 유지하려면 fr 대신 다른 단위를 쓰고, 텍스트에는 fr을 써서 남은 공간을 채우게 하면 됨

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

• Container queries가 더 나은 해결책 아닌가 생각했음
  하지만 전체 그리드의 일관성을 유지하려면 subgrid가 더 적합할 수도 있음
  참고로 CodePen 예제를 보면 이해가 쉬움

  • Container queries는 형제 요소 크기에 반응하는 문제를 해결하지 못함
    게다가 container를 쓰면 새로운 stacking context가 생겨서 불편함
    subgrid와 container를 함께 쓸 수 없다는 게 아쉬움. subgrid 크기를 자식이 참조할 수 있다면 정말 강력할 것 같음

• “결국 <table> 레이아웃으로 돌아온 건가?”라는 생각이 듦

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

• 예전에 겪은 grid 버그 중 하나는 <img> 요소를 퍼센트 단위로 크기 지정하면 셀 크기가 원본 이미지 크기로 왜곡되는 현상이었음
  Firefox와 Chromium 모두에서 발생했고, 관련 버그는 Mozilla Bug 1857365에 있음

  • 이미지에 고정된 width/height 속성을 주면 이 문제가 사라지는지 궁금함

• CSS가 레이아웃을 위해 문서 구조 정보를 추가해야 하는 경우가 종종 있어서 아쉬움
  예를 들어 행 개수를 명시해야 하는 점이 그렇음

  • 이상적으로는 부모가 달라도 요소를 정렬할 수 있는 방법이 있었으면 함
    혹은 한 flex 컨테이너가 다른 컨테이너의 분포를 모방할 수 있다면 좋겠음
    하지만 그렇게 하면 DX가 복잡해질 가능성이 큼

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

• “결국 다시 grid로 돌아온 건가?”라는 생각이 듦
  예전 HTML 시절에도 비슷한 걸 했었음

  • 하지만 지금의 grid는 반응형 디자인을 훨씬 쉽게 만들어줌
  • 물론, 이제는 스타일링 중에 버그가 더 많아지는 부작용도 있음 😅

• Josh의 블로그 글은 항상 감탄스러움
  글의 명료함, 디자인 감각, 인터랙티브한 웹사이트까지 모두 훌륭함

  • 나도 그의 메일링 리스트 구독자임. 새 글이 올라올 때마다 기대됨

• 개인적으로 grid는 여전히 다루기 불편함
  문법도 어색하고 레이아웃 감각도 잘 안 맞음. Flexbox가 훨씬 직관적이고 유연함

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