Grid 트랙과 영역 설계
Grid는 행과 열 트랙을 동시에 설계해 카드, 갤러리, 전체 페이지 같은 2차원 레이아웃을 안정적으로 만든다.
| 설계 질문 | Grid가 맞을 때 | 다른 선택 | 확인 기준 |
|---|---|---|---|
| 행과 열이 모두 중요한가 | 2차원 배치가 핵심 | 한 축이면 flex | 열과 행 관계가 보이는가 |
| 반복 카드인가 | repeat, auto-fit으로 유동 열 구성 | 단순 세로 목록이면 block | 폭 변화에 맞춰 열 수가 바뀌는가 |
| 페이지 골격인가 | area로 header/sidebar/main 정의 | 작은 컴포넌트는 flex | 영역 이름이 구조를 설명하는가 |
| 콘텐츠 크기가 다양한가 | minmax와 fr로 대응 | 고정 폭만 사용 금지 | 긴 텍스트가 넘치지 않는가 |
| 간격 규칙이 필요한가 | gap으로 일관 간격 유지 | 개별 margin 조정 | 간격 책임이 부모에 있는가 |
Grid는 2차원 관계를 보여 주는 도구이므로 행과 열의 의미가 없으면 단순 배치에 과한 선택일 수 있다.