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