Grid의 자동 배치, 간격과 전체 정렬을 설정합니다.
gap은 track 사이 간격, justify/align-items는 각 칸 안 item 정렬, justify/align-content는 grid 전체를 컨테이너 안에서 정렬합니다. grid-auto-flow는 자동 배치 방향을 정합니다.
이번 예제의 출발점은 grid-auto-flow:column; place-items:center;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 place-content를 start와 space-between으로 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
place-items와 place-content의 대상이 item인지 grid 전체인지 구분하세요.
직접 바꿔보세요place-content를 start와 space-between으로 비교하세요.