CSS Grid Subgrid를 통한 중첩 요소 간 수직 정렬 최적화

Context

가변적 콘텐츠 길이에 따른 카드 레이아웃의 불균형 문제 발생. 기존의 고정 높이 설정, JavaScript 기반 동적 계산, HTML 구조 평탄화 방식은 각각 반응형 대응 실패, 런타임 성능 저하, 시맨틱 마크업 파괴라는 설계적 한계 노출.

Technical Solution

• Parent Grid의 Track 정의를 Child Element가 직접 상속받는 Subgrid 구조 도입
• grid-template-rows: subgrid 설정을 통한 중첩 컨테이너의 독립적 그리드 생성 방지
• grid-row: span [n] 명시를 통해 부모 그리드 내 점유 영역을 확정하여 레이아웃 엔진의 렌더링 경로 최적화
• 콘텐츠 길이에 관계없이 동일 행의 요소들이 동일한 Grid Track을 공유하도록 설계
• 마크업 구조를 유지하면서 시각적 정렬을 달성하는 선언적 레이아웃 제어 방식 적용