CSS Flexbox vs Grid 차이와 선택 기준: 1차원 vs 2차원 레이아웃

"이건 Flexbox로 짜야 하나, Grid로 짜야 하나?" CSS 레이아웃을 다룰 때 누구나 한 번쯤 고민합니다. 둘 다 강력하지만 설계 철학이 다릅니다. 핵심은 단 하나, Flexbox는 1차원, Grid는 2차원이라는 점입니다. 이 차이만 이해하면 선택이 훨씬 쉬워집니다.

핵심 차이: 1차원 vs 2차원

Flexbox는 한 방향(가로 또는 세로)으로 아이템을 배치합니다. Grid는 행과 열을 동시에 다루는 2차원 시스템입니다.

구분	Flexbox	Grid
차원	1차원 (행 또는 열)	2차원 (행과 열)
적합한 곳	내비게이션, 버튼 그룹	페이지 전체 레이아웃
정렬 기준	콘텐츠 중심	레이아웃 중심
대표 속성	flex-direction, justify-content	grid-template-columns, gap

Flexbox: 한 줄 정렬의 강자

메뉴 바, 카드 안의 요소 정렬처럼 한 방향 배치에 최적입니다. 정렬과 공간 분배가 직관적입니다.

.navbar {
  display: flex;
  justify-content: space-between; /* 양 끝 정렬 */
  align-items: center;           /* 세로 중앙 */
  gap: 16px;
}

/* 가운데 정렬의 정석 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

팁: 요소를 화면 정중앙에 두는 가장 쉬운 방법은 위 .center 패턴입니다.

Grid: 전체 레이아웃의 정석

대시보드, 갤러리, 페이지 골격처럼 행과 열을 함께 잡을 때 강력합니다.

.gallery {
  display: grid;
  /* 최소 200px, 공간 남으면 균등 분배 → 반응형 자동 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr; /* 사이드바 + 본문 */
  grid-template-rows: 60px 1fr;     /* 헤더 + 콘텐츠 */
  min-height: 100vh;
}

minmax()와 auto-fill을 조합하면 미디어 쿼리 없이도 반응형 그리드를 만들 수 있습니다.

선택 기준과 마무리

• 한 줄/한 방향 배치 → Flexbox (메뉴, 태그 목록, 버튼 그룹)
• 행과 열을 함께 잡는 전체 골격 → Grid (페이지 레이아웃, 갤러리)
• 둘은 경쟁 관계가 아니라 함께 쓰는 조합: Grid로 큰 틀을, 각 칸 내부 정렬은 Flexbox로
• 콘텐츠 양에 따라 유연하게 → Flexbox / 정해진 틀에 맞춰 배치 → Grid

실무에서는 "바깥은 Grid, 안쪽은 Flex"가 가장 흔한 조합입니다. 둘 다 익혀두면 어떤 레이아웃도 두렵지 않습니다.