Grid 판단 흐름

행과 열을 정한 뒤 배치 방법을 선택한다

Grid는 트랙을 먼저 만들고, gap으로 간격을 둔 다음 area 또는 auto-placement로 아이템 위치를 결정합니다.

3열 · 3행 트랙 예시

gap 8px

header area

nav

main

aside

auto

01 Columns 열 트랙의 개수와 폭을 먼저 정합니다.

02 Rows 필요한 행 높이를 auto, fr, px 등으로 둡니다.

03 Gap 셀 사이 간격은 margin 대신 gap으로 통일합니다.

04 Area 큰 레이아웃은 이름 있는 영역으로 읽기 쉽게 둡니다.

05 Auto place 남은 아이템은 빈 셀에 순서대로 자동 배치됩니다.