CSS Grid 레이아웃
Grid는 행과 열을 먼저 만들고 아이템을 셀, 라인, 영역에 배치하는 2차원 레이아웃 모델이다.
| 구성 | 역할 | 대표 속성 | 확인할 것 |
|---|---|---|---|
| Container | 자식 배치 규칙을 가진 부모 | display:grid | 그리드가 부모에 적용됐는가 |
| Track | 행과 열의 크기 | grid-template-columns/rows | 고정·유동 크기가 섞여도 안전한가 |
| Gap | 트랙 사이 간격 | gap, row-gap, column-gap | margin 대신 일정 간격을 쓰는가 |
| Line | 아이템 시작/끝 위치 | grid-column, grid-row | 라인 번호를 헷갈리지 않는가 |
| Area | 이름 붙은 배치 영역 | grid-template-areas | 페이지 구조가 이름으로 읽히는가 |
Grid를 볼 때는 아이템보다 먼저 부모가 만든 행과 열의 좌표계를 확인한다.