CSS Flexbox vs Grid: 언제 무엇을 써야 할까

"이건 Flex로 해야 하나 Grid로 해야 하나?" 매번 헷갈린다면 기준은 하나입니다. 한 방향(1차원)이면 Flexbox, 행과 열을 동시에(2차원) 다루면 Grid.

Flexbox: 한 줄로 늘어놓고 정렬

내비게이션 바, 버튼 그룹, 카드 안의 요소 정렬처럼 한 축을 다룰 때 최적입니다.

.nav {
  display: flex;
  justify-content: space-between; /* 주축(가로) 정렬 */
  align-items: center;           /* 교차축(세로) 정렬 */
  gap: 16px;
}

• justify-content: 주축 방향 배치(시작/끝/가운데/균등)
• align-items: 교차축 정렬
• flex: 1: 남은 공간을 비율로 나눠 가짐

Grid: 행과 열을 동시에 설계

페이지 전체 레이아웃, 카드 갤러리, 대시보드처럼 격자가 필요하면 Grid입니다.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

auto-fill + minmax는 화면 너비에 맞춰 열 개수를 자동 조절하는 반응형 갤러리의 정석 패턴입니다. 미디어쿼리 없이도 자동 줄바꿈됩니다.

선택 기준 한눈에

상황	추천
메뉴·버튼·태그 한 줄 정렬	Flexbox
가운데 정렬 한 방	Flexbox
카드 그리드 갤러리	Grid
페이지 전체 골격(헤더/사이드/본문)	Grid
한 칸 안의 요소 미세 정렬	Flexbox

함께 쓰는 게 정답

실무에서는 Grid로 큰 골격을 잡고, 각 칸 내부는 Flex로 정렬하는 조합이 가장 많습니다.

.layout { display: grid; grid-template-columns: 240px 1fr; }
.card   { display: flex; flex-direction: column; gap: 8px; }

마무리 체크리스트

• 1차원 정렬 → Flexbox
• 2차원 격자 → Grid
• 반응형 카드 → repeat(auto-fill, minmax())
• 큰 틀은 Grid, 내부 정렬은 Flex로 조합

둘 중 하나를 고르는 게 아니라, 역할을 나눠 함께 쓰면 레이아웃이 훨씬 단순해집니다.