Grid의 자동 배치, 간격과 전체 정렬을 설정합니다.
gap은 track 사이 간격, justify/align-items는 각 칸 안 item 정렬, justify/align-content는 grid 전체를 컨테이너 안에서 정렬합니다. grid-auto-flow는 자동 배치 방향을 정합니다.
.stage는 100px 열 두 개와 grid-auto-rows로 정한 70px 행 두 개로 212×152 크기의 격자를 만드는데, 컨테이너가 그보다 넓고 min-height도 220px라 남는 공간이 생깁니다. place-content: center는 그 격자 묶음 전체를 남는 공간의 한가운데로 옮기고, place-items: center는 100×70 칸마다 A부터 D까지의 초록 상자를 다시 가운데에 놓아 상자가 칸보다 작게 보입니다.
grid-auto-flow: dense를 주면 자동 배치가 앞쪽에 남은 빈 칸을 뒤에 오는 작은 항목으로 메웁니다. 빈틈은 줄어들지만 화면에 보이는 순서가 HTML 순서와 달라질 수 있어, 순서가 의미를 갖는 목록에는 쓰지 않습니다.
place-items와 place-content의 대상이 item인지 grid 전체인지 구분하세요.
직접 바꿔보세요place-content를 start와 space-between으로 비교하세요.