[subgrid] 제목 길이가 달라도 카드들이 줄 맞춰 정렬되는 그리드

한 줄 요약 - 카드 안의 그리드에 grid-template-rows: subgrid 한 줄만 주면, 카드가 자기 행을 따로 만들지 않고 부모 그리드의 행 선을 그대로 물려받아 제목 길이가 달라도 본문/버튼 줄이 모든 카드에서 같은 높이에 정렬됩니다.

이럴 때 필요해요

가격표나 기능 카드를 가로로 늘어놓을 때, 카드마다 제목 길이가 달라 어떤 건 1줄, 어떤 건 3줄이면 본문 시작선과 '구매' 버튼 높이가 제각각으로 어긋나 지저분해 보입니다. 예전엔 이걸 맞추려고 JS로 가장 긴 카드 높이를 재서 나머지에 강제로 넣거나, 모든 제목에 억지로 같은 min-height를 박아야 했어요. subgrid는 이 정렬을 순수 CSS로 해결합니다.

어떻게 동작하나

1. 부모 요소를 display: grid로 만들고 행(row)을 제목줄/본문줄/푸터줄 3개로 한 번만 정의합니다.

2. 각 카드는 부모의 3개 행에 걸쳐 자리잡고(span 3), 스스로도 grid가 됩니다.

3. 카드에 grid-template-rows: subgrid를 주면 카드가 자기 행을 새로 만들지 않고 부모의 행 선을 물려받습니다. 그래서 제목줄의 높이는 가장 긴 제목 기준으로 한 값으로 통일되고, 나머지 카드의 제목도 그 칸 안에 들어가 본문과 버튼이 줄을 맞춥니다.

핵심은 이거예요

중첩된 그리드가 부모의 행/열 선을 '상속'할 수 있다는 것 하나입니다. 자식이 부모와 같은 선을 공유하니, 형제 카드끼리 줄이 자동으로 맞춰집니다. 'subgrid'라는 단어 하나가 이 상속 스위치예요.

놓치기 쉬운 것

• 카드는 부모 grid의 직접 자식이어야 하고, 부모가 실제로 행을 정의(grid-template-rows)하고 있어야 물려받을 선이 생깁니다. 사이에 div 한 겹이 더 끼면 상속이 끊깁니다.

• subgrid는 비교적 최신 기능(Chrome/Edge/Firefox/Safari 모두 지원하지만 구형 브라우저는 미지원)이라, 안 되는 환경에선 카드 높이가 어긋나도 깨지진 않게 폴백(고정 높이나 flex 보정)을 함께 두는 게 안전합니다.

이런 곳에 써요

• 가격 플랜 카드 - 제목/설명 길이가 달라도 가격과 버튼 줄을 한 선에 정렬

• 상품/기능 카드 그리드 - 제목 줄 수가 제각각인 목록에서 본문과 CTA 정렬