subgrid로 트랙 공유

개념 이해하기

일반 중첩 Grid는 자기만의 track을 계산하지만 subgrid는 부모 Grid의 track 크기와 선을 이어받습니다. 여러 카드 내부의 제목과 버튼을 같은 행에 맞추는 것처럼 중첩된 콘텐츠 정렬에 유용합니다.

두 article은 grid-row: span 3으로 바깥 격자의 세 행을 함께 차지하고, grid-template-rows: subgrid 덕분에 자기 행을 따로 계산하지 않고 그 세 행을 그대로 씁니다. 그래서 화면이 좁아져 첫 카드의 설명 문장만 두 줄로 접혀도 그 행이 두 카드 모두에서 높아지고, 열기 버튼은 같은 높이에 나란히 남습니다. article에 gap을 따로 주지 않았으므로 행 사이 간격은 바깥 격자의 12px를 그대로 씁니다.

subgrid가 높이를 맞추는 범위는 바깥 격자에서 같은 행을 공유하는 카드끼리입니다. 카드가 여러 줄로 늘어나면 줄마다 따로 맞춰지므로 첫 줄과 둘째 줄의 제목 높이는 서로 다를 수 있고, 공유한 축에서는 부모 격자의 선 이름도 이어받아 grid-row에 그대로 쓸 수 있습니다.