행과 열을 정한 뒤 배치 방법을 선택한다
Grid는 트랙을 먼저 만들고 gap으로 간격을 둔 다음 area 또는 auto-placement로 아이템 위치를 결정한다.
| 순서 | 하는 일 | 관련 속성 | 실패 신호 |
|---|---|---|---|
| 01 Track | 필요한 열과 행 크기 정의 | repeat, minmax, fr | 콘텐츠 길이에 따라 깨짐 |
| 02 Gap | 셀 사이 간격을 시스템화 | gap | 아이템 margin이 서로 충돌 |
| 03 Place | 중요 아이템 위치 지정 | grid-column, grid-area | 위치 규칙이 코드 곳곳에 흩어짐 |
| 04 Auto | 남은 아이템 자동 배치 | grid-auto-flow | 의도하지 않은 순서 변경 |
| 05 Responsive | 화면 폭별 트랙 수 조정 | auto-fit, media query | 모바일에서 가로 overflow |
Grid 설계는 아이템을 먼저 움직이는 것이 아니라 부모의 트랙 규칙을 먼저 정하는 작업이다.