✅ CSS Flexbox와 Grid의 차이점과 사용 사례는?

프론트엔드 면접에서 “Flexbox와 Grid의 차이점은?”이라는 질문은 단순 문법 암기보다는, 어떤 상황에 어떤 레이아웃 시스템을 선택하는지를 통해 레이아웃 설계에 대한 감각을 확인하려는 질문입니다.
이번 글에서는 두 레이아웃 시스템의 철학적 차이, 실제 사용 예제, 실무에서의 선택 기준까지 완벽히 정리합니다.

📌 1. Flexbox vs Grid – 핵심 개념 비교

항목 Flexbox Grid

축	1차원(주축/교차축)	2차원(행과 열 모두)
정렬 단위	아이템 중심 정렬	레이아웃 전체 구조 중심 정렬
제어 방향	한 방향 (row/column)	행과 열 동시 제어
사용 목적	컴포넌트 내부 정렬	전체 페이지/섹션 레이아웃
브라우저 지원	IE11 일부 지원	IE는 미지원 (Modern browser OK)

📌 2. Flexbox – 1차원 레이아웃

✅ 기본 문법

.container {
  display: flex;
  flex-direction: row; /* or column */
  justify-content: space-between;
  align-items: center;
}

✅ 대표 사용 사례

버튼 내부 텍스트 + 아이콘 정렬
네비게이션 바
카드 컴포넌트 내부 배치

✅ 실무 예시

<div class="button">
  <span>저장</span>
  <img src="icon.png" />
</div>

.button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

요소들 사이 간격을 조절하거나 정렬할 때 유용

📌 3. CSS Grid – 2차원 레이아웃

✅ 기본 문법

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
}

✅ 대표 사용 사례

페이지 전체 레이아웃
대시보드 형태의 UI
격자 형태의 이미지 갤러리

✅ 실무 예시

<div class="layout">
  <header>...</header>
  <nav>...</nav>
  <main>...</main>
  <aside>...</aside>
  <footer>...</footer>
</div>

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
}

시멘틱한 구조를 시각적으로 그대로 표현 가능

📌 4. 어떤 기준으로 선택할까?

상황 추천 레이아웃

하나의 방향으로 정렬해야 할 때	Flexbox
내부 요소의 정렬이 유연해야 할 때	Flexbox
2차원 레이아웃이 필요한 복잡한 UI	Grid
정사각형 블록들이 반복되는 구조	Grid
반응형으로 열/행 배치를 조정해야 할 때	Grid + Media Query

📌 5. 실무에서 겪은 문제와 해결 경험

🧪 문제

카드 레이아웃을 구현할 때, 처음엔 Flexbox로 행마다 아이템을 나열함.
그러나 각 행마다 높이가 달라지고, 배치가 고르지 않아 레이아웃이 깨지는 현상 발생

✅ 해결

Grid를 활용하여 행/열을 정확히 설정하고 auto-fill과 minmax()를 사용하여 반응형 대응

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

결과적으로 모든 카드가 정렬된 형태로 균등 분배되며, 반응형으로도 깨지지 않음

📌 6. 면접에서 이렇게 설명하세요

Flexbox는 1차원 정렬에 적합한 레이아웃 시스템으로, 주로 컴포넌트 내부의 요소 배치에 사용됩니다.
반면 Grid는 2차원 정렬에 특화되어 있어, 전체 페이지 구조 설계나 복잡한 레이아웃에 적합합니다.
실무에서는 두 가지를 조합해서 사용하는 경우가 많고, 상황에 따라 어떤 레이아웃 시스템이 더 직관적이고 효율적인지를 기준으로 선택합니다.

📌 마무리 요약

항목 Flexbox Grid

정렬 방향	1차원	2차원
활용 예	컴포넌트 내부 정렬	페이지 전체 레이아웃
장점	직관적인 정렬	구조화된 배치
단점	복잡한 배치 불리	학습 곡선 있음

CSS,Flexbox,Grid,프론트엔드면접,레이아웃시스템,CSS정렬,웹디자인,반응형웹,실무예제,면접대비