중첩된 Grid가 부모의 열이나 행 track을 공유하도록 합니다.
일반 중첩 Grid는 자기만의 track을 계산하지만 subgrid는 부모 Grid의 track 크기와 선을 이어받습니다. 여러 카드 내부의 제목과 버튼을 같은 행에 맞추는 것처럼 중첩된 콘텐츠 정렬에 유용합니다.
이번 예제의 출발점은 grid-template-rows:subgrid;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 열 방향 subgrid가 필요한 목록 구조를 생각해보고 행 간 gap을 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
subgrid를 사용한 축은 자체 track 목록 대신 부모 track을 공유합니다. 어느 축을 공유하는지 명확히 지정하세요.
직접 바꿔보세요열 방향 subgrid가 필요한 목록 구조를 생각해보고 행 간 gap을 바꾸세요.