Container
display: grid로 격자 배치 문맥을 시작합니다.
Grid 트랙과 영역 설계
Grid는 행과 열 트랙을 동시에 설계해 카드, 갤러리, 전체 페이지 같은 2차원 레이아웃을 안정적으로 만듭니다.
Tracks
grid-template-columns와 rows로 행과 열의 크기를 정합니다.
Gap
gap으로 셀 사이의 간격을 일관되게 관리합니다.
Place
라인 번호, span, area로 아이템의 위치와 범위를 지정합니다.
남는 공간을 비율로 나누어 반응형 트랙을 쉽게 만듭니다.
최소와 최대 크기를 함께 정해 좁은 화면의 무너짐을 줄입니다.
이름 붙은 영역으로 헤더, 사이드바, 본문 배치를 읽기 쉽게 만듭니다.
justify와 align 계열은 셀 내부와 전체 격자 정렬을 나누어 다룹니다.
Grid 트랙·영역 선택
행과 열을 동시에 제어해야 하면 Flexbox보다 Grid가 더 직접적입니다.
Grid 트랙과 영역 실수 방지
트랙 크기와 아이템 위치를 섞어 쓰면 레이아웃 의도가 흐려집니다.
Grid 트랙과 영역 설계
반응형 카드 그리드를 repeat, minmax, gap으로 구성합니다.