CSS Subgrid — 중첩 그리드의 완벽한 정렬

Subgrid란

자식 그리드가 부모 그리드의 트랙을 그대로 사용하여, 중첩된 그리드 아이템이 완벽하게 정렬됩니다.

사용 예시

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;  /* 헤더, 본문, 푸터 */
}

/* 모든 카드의 헤더, 본문, 푸터가
   동일한 높이로 정렬됨 */

브라우저 지원

2024년부터 모든 주요 브라우저에서 지원합니다.