CSS Subgrid란? 카드 안쪽을 부모 그리드 줄에 맞추기
부모 그리드 트랙을 자식에게 상속
그리드 레이아웃에서 자식 요소가 자체 그리드를 가질 때, 부모의 트랙 정의와 동기화되지 않는 문제가 있었습니다. Subgrid는 grid-template-rows나 grid-template-columns에 subgrid 값을 지정하여 부모 트랙을 그대로 물려받습니다.
이를 통해 카드 목록에서 제목, 본문, 버튼 영역이 서로 다른 카드끼리도 완벽하게 정렬되는 레이아웃을 구현할 수 있습니다.
적용 방법
1
부모 요소에 display: grid와 트랙 정의를 설정한다
2
자식 요소에도 display: grid를 적용한다
3
grid-template-rows: subgrid 또는 grid-template-columns: subgrid를 지정한다
4
자식 요소의 grid-row로 부모 트랙 범위를 지정한다
장점
- ✓ 중첩 그리드에서 정렬 일관성이 보장된다
- ✓ 복잡한 workaround 없이 깔끔한 코드로 구현 가능하다
단점
- ✗ 부모 트랙에 의존하여 독립적 레이아웃 변경이 어려울 수 있다
- ✗ 디버깅 시 부모-자식 트랙 관계 파악이 복잡할 수 있다
사용 사례
카드 목록에서 헤더, 본문, 푸터 영역 정렬 통일
폼 레이아웃에서 라벨과 입력 필드 정렬 유지