Flexbox와 Grid의 차이점은 무엇이며 어떤 상황에서 각각을 사용하나요?

CSS에서 레이아웃을 구성하는 두 가지 핵심 도구인 Flexbox와 Grid는 각각 다른 문제를 해결하기 위해 설계되었습니다. 핵심 차이는 차원(dimension) 에 있습니다. Flexbox는 1차원, Grid는 2차원 레이아웃을 담당합니다.

Flexbox (1차원 레이아웃)

Flexbox는 하나의 축(행 또는 열) 을 기준으로 아이템을 배치합니다. 아이템의 정렬, 간격, 크기 조절에 강점이 있으며 내부 요소의 흐름을 제어하는 데 최적화되어 있습니다.

기본 개념

.container {
  display: flex;
  flex-direction: row;       /* 주축 방향: row(기본), column, row-reverse, column-reverse */
  justify-content: center;   /* 주축 정렬: flex-start, center, flex-end, space-between, space-around */
  align-items: center;       /* 교차축 정렬: stretch(기본), flex-start, center, flex-end */
  gap: 16px;                 /* 아이템 간격 */
  flex-wrap: wrap;           /* 줄 넘김 허용 */
}

.item {
  flex: 1;          /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% 의 단축 */
  flex-grow: 1;     /* 남은 공간을 얼마나 차지할지 */
  flex-shrink: 0;   /* 공간 부족 시 줄어드는 비율 */
  flex-basis: 200px; /* 기본 크기 */
}

네비게이션 바 예시

.navbar {
  display: flex;
  justify-content: space-between; /* 로고와 메뉴를 양쪽으로 */
  align-items: center;
  padding: 0 24px;
  height: 60px;
}

.nav-menu {
  display: flex;
  gap: 24px;
  list-style: none;
}

<nav class="navbar">
  <div class="logo">MyApp</div>
  <ul class="nav-menu">
    <li>홈</li>
    <li>소개</li>
    <li>연락</li>
  </ul>
</nav>

카드 리스트 예시

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 280px; /* 최소 280px, 공간이 있으면 늘어남 */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

Flexbox가 적합한 상황

• 네비게이션 바 (로고 + 메뉴 정렬)
• 버튼 그룹 (수평 정렬)
• 카드 컴포넌트 내부 (아이콘 + 텍스트 수직 중앙 정렬)
• 입력 폼 (라벨 + 인풋 정렬)
• 반응형 카드 목록 (flex-wrap 활용)

Grid (2차원 레이아웃)

Grid는 행과 열을 동시에 제어하여 격자 형태의 복잡한 레이아웃을 만드는 데 특화되어 있습니다. 아이템이 특정 셀에 어떻게 배치될지 명시적으로 지정할 수 있습니다.

기본 개념

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3열: 200px, 남은공간 균등 분할 */
  grid-template-rows: auto 1fr auto;    /* 3행: 내용 크기, 남은공간, 내용 크기 */
  gap: 16px;                            /* 행/열 간격 */
}

/* 특정 아이템의 위치 지정 */
.item {
  grid-column: 1 / 3;  /* 1번 열에서 3번 열 직전까지 (2칸 차지) */
  grid-row: 2 / 4;     /* 2번 행에서 4번 행 직전까지 (2칸 차지) */
}

유용한 Grid 함수

.container {
  /* repeat(): 반복 패턴 */
  grid-template-columns: repeat(3, 1fr); /* 동일한 3열 */

  /* auto-fill vs auto-fit: 반응형 그리드 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* auto-fill: 빈 열 유지, auto-fit: 남은 공간을 기존 아이템이 채움 */
}

대시보드 레이아웃 예시

.dashboard {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "sidebar main    main"
    "footer  footer  footer";
  grid-template-columns: 240px 1fr 1fr;
  grid-template-rows: 60px 1fr 1fr 50px;
  min-height: 100vh;
  gap: 8px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

<div class="dashboard">
  <header class="header">헤더</header>
  <aside class="sidebar">사이드바</aside>
  <main class="main">메인 콘텐츠</main>
  <footer class="footer">푸터</footer>
</div>

사진 갤러리 예시

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

/* 특정 사진을 더 크게 강조 */
.gallery .featured {
  grid-column: span 2;
  grid-row: span 2;
}

Grid가 적합한 상황

• 전체 페이지 레이아웃 (헤더, 사이드바, 메인, 푸터)
• 데이터 테이블 대체 레이아웃
• 사진 갤러리, 포트폴리오
• 대시보드 위젯 배치
• 잡지 스타일의 복잡한 레이아웃

Flexbox vs Grid 비교

기준	Flexbox	Grid
차원	1차원 (행 OR 열)	2차원 (행 AND 열)
배치 기준	콘텐츠 크기 기반	컨테이너 크기 기반
아이템 제어	개별 아이템 유연한 크기	셀 위치 명시적 지정
정렬	단일 축에서 강력	양 축 모두 정밀 제어
주요 사용	컴포넌트 내부	페이지 전체 레이아웃
브라우저 지원	매우 좋음	매우 좋음 (IE 제외)

실무에서의 조합 패턴

실제 프로젝트에서는 두 가지를 함께 사용합니다. 일반적인 원칙은 다음과 같습니다.

• Grid: 전체 페이지 구조, 섹션 단위 레이아웃
• Flexbox: 컴포넌트 내부 정렬, 버튼/아이콘/텍스트 배치

/* Grid로 전체 레이아웃 */
.page-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 60px 1fr;
  height: 100vh;
}

/* Flexbox로 헤더 내부 정렬 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

/* Flexbox로 버튼 그룹 정렬 */
.button-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

정리

Flexbox와 Grid는 경쟁 관계가 아니라 상호 보완적인 도구입니다. 아이템이 일렬로 나열되는 단순한 1차원 정렬에는 Flexbox를, 행과 열 모두를 제어해야 하는 복잡한 2차원 레이아웃에는 Grid를 선택하세요. 실무에서는 대부분 두 가지를 함께 사용합니다.