11장. Subgrid

중첩 카드가 각자 Grid를 만들면 제목 길이에 따라 footer 높이가 어긋난다. Subgrid는 부모 track을 자식이 공유하게 한다.

.cards { display:grid; grid-template-columns:repeat(3,1fr); }
.task { display:grid; grid-template-rows:subgrid; grid-row:span 3; }

Subgrid는 “모든 것을 정렬”하는 마법이 아니라 어떤 축의 track 계약을 공유할지 선택하는 기능이다. 카드 내부 DOM이 서로 다르면 억지 정렬보다 component 구조부터 통일한다.

실습 완성 CSS는 더 단순한 grid-template-rows:auto 1fr auto를 기본으로 쓴다. 별 branch에서 subgrid로 바꾸고 최소 지원 브라우저를 확인한다. 책은 최신 문법을 보여 주되 제품 요구보다 앞세우지 않는다.