Flexbox는 한 방향으로 흐르는 1차원 배치, CSS Grid는 행과 열을 함께 다루는 2차원 배치다. 크기를 누가 정하느냐도 다르다. flex는 아이템과 콘텐츠가, grid는 컨테이너의 트랙이 정한다.
| Flexbox | Grid | |
|---|---|---|
| 차원 | 1차원(행 또는 열) | 2차원(행과 열) |
| 크기 결정 | 아이템(flex-basis, 콘텐츠) | 컨테이너(grid-template-*) |
| 속성만 바꾸면 | 아이템이 한 줄로 늘어선다 | 트랙 정의가 없으면 한 열로 쌓인다 |
아이템의 margin-left: auto | 남은 공간을 먹고 끝으로 밀림 | 자기 칸 안에서 오른쪽으로 붙음 |
| 넘치는 콘텐츠 | 컨테이너가 늘어날 수 있다 | 고정 트랙을 넘으면 넘친다 |
언제 무엇을
- flex: 내비게이션 바, 버튼 묶음, 아이템 수가 들쭉날쭉한 줄, 콘텐츠 크기에 맞춰 흐르는 배치
- grid: 카드 그리드·갤러리, 페이지 전체 골격, 행과 열이 함께 맞아야 하는 표 모양 배치
- 같이 쓴다: 페이지 골격은 grid, 그 칸 안의 작은 줄은 flex
바꿀 때 주의
display: flex를 grid로 바꾸기만 하면 기본 동작이 달라져 레이아웃이 깨진다. flex-wrap + calc(33.333% - gap) 같은 계산은 grid-template-columns: repeat(3, 1fr)로, flex: 0 0 250px 사이드바는 250px 1fr 트랙으로 옮겨 적어야 한다. 성능 차이는 실무에서 거의 없고, grid가 더 적은 DOM으로 같은 배치를 만드는 경우가 많다.