CSS Grid 플레이그라운드

grid-template-columns와 grid-template-rows를 직접 편집하거나 흔한 프리셋(3열, 사이드바, 홀리 그레일, 자동 맞춤 카드)에서 고를 수 있습니다. 간격, justify-items, align-items를 칩으로 조정하고 미리보기에 몇 개를 표시할지도 바꿀 수 있습니다. 미리보기가 모든 변경을 실시간으로 반영하고 CSS 출력은 바로 붙여 넣을 수 있습니다. CSS 레이아웃의 나머지 절반을 다루는 플렉스박스 플레이그라운드와 짝을 이룹니다.

그리드를 이전의 모든 것과 다르게 만드는 조각이 fr 단위이며, 이것은 백분율이 아닙니다. 1fr로 크기를 준 트랙은 고정 트랙과 간격을 뺀 뒤 남은 공간의 몫을 가져갑니다. 그래서 200px 1fr 1fr은 컨테이너를 나누는 것이 아니라 나머지를 둘로 나눕니다. 간격이 있는 그리드는 합이 맞는데 백분율 레이아웃은 정확히 여백 폭만큼 넘치는 이유가 이것입니다.

auto-fit과 auto-fill은 줄이 가득 차기 전까지는 똑같아 보이다가, 그 순간 반대로 동작합니다. 둘 다 들어갈 수 있는 만큼 트랙을 반복하지만, auto-fill은 빈 트랙을 남겨 두어서 다섯 트랙짜리 줄에 카드 세 개가 있으면 원래 폭 그대로 왼쪽에 머물고, auto-fit은 빈 것을 접어 세 개가 줄 전체로 늘어나게 합니다. 어느 쪽을 원하는지는 부분적으로 찬 줄이 그리드처럼 보여야 하는지 카드 줄처럼 보여야 하는지에 달려 있습니다.

정렬 속성은 헷갈리기 쉬운 짝으로 옵니다. justify-*는 인라인 축을 따라, align-*은 블록 축을 따라 동작하며, -items 계열은 각 칸 안의 내용을 배치하고 -content 계열은 트랙 자체를 컨테이너 안에 분배합니다. 트랙이 컨테이너를 채우지 못하는 그리드가 그 차이가 눈에 보이는 경우입니다.

그리드는 두 차원을 한 번에 다루며, 취향이 아니라 바로 그 점이 플렉스박스 대신 그리드를 집는 이유입니다. 줄바꿈하며 알아서 크기를 잡아야 하는 항목들의 줄은 플렉스박스의 일이고, 여러 줄에 걸쳐 열이 맞아야 하는 레이아웃은 그리드의 일입니다. 뒤엣것을 앞엣것으로 하려다 보면 정렬을 손으로 유지하게 됩니다.