한 줄 요약
Grid는 칸(열)과 줄(행)을 먼저 그리고, 각 영역에 이름을 붙여 콘텐츠를 배치합니다.
비유로 이해하기
이사할 집의 평면도를 먼저 그리고 “여기는 현관, 여기는 거실”이라고 이름을 붙이는 것처럼, Grid는 화면을 칸으로 나누고 이름을 붙이는 도구입니다. 그다음 가구를 그 방에 넣기만 하면 됩니다.
grid-template-areas에 글자로 평면도를 그려 두면, 배치를 바꾸고 싶을 때 가구를 하나하나 옮기지 않고 평면도 글자만 고치면 됩니다.
비교해 보기
grid-template-columns= 방의 가로 폭 (예: 120px 1fr = 작은방 고정, 거실은 남는 공간 전부)grid-template-rows= 각 층의 높이grid-template-areas= 글자로 그린 평면도
직접 실행해 보기
평면도에서 "side main"을 "main side"로 바꿔 보세요. 작은방과 거실의 위치가 한 번에 바뀝니다. 열 폭 120px 1fr도 1fr 120px로 같이 바꿔 보세요.
GenerateBlocks에서는
GenerateBlocks 컨테이너를 Grid로 바꾸고 Grid Template Columns에 1fr 1fr 1fr처럼 입력하면 같은 폭의 세 칸이 생깁니다. 독립학교 홈의 히어로는 1.1fr 0.9fr로 글 쪽을 조금 더 넓게 잡았어요.
참고: Josh W. Comeau: Interactive Guide to CSS Grid · web.dev: Grid · CSS-Tricks: Complete Guide to CSS Grid