Flexbox vs Grid 완전 정복! 언제 어떤 레이아웃을 써야 할까?

 

 

CSS로 레이아웃을 구성할 때 가장 많이 사용하는 두 가지 방법이 바로 Flexbox와 Grid입니다.
처음에는 비슷해 보여도, 사용하는 목적과 상황에 따라 완전히 다른 결과를 만들어냅니다.
이번 포스팅에서는 ✅차이점 ✅사용 시기 ✅실무 예제 ✅추천 사용처까지 한 번에 정리해 보겠습니다.

---

🔍 1. 기본 개념 비교

구분	Flexbox	Grid
🎯 목적	1차원 레이아웃 (row 또는 column)	2차원 레이아웃 (row + column)
📐 구성	주축(main axis) 기준 정렬	행과 열 기준 배치
🧲 정렬	요소 간 공간 배분, 정렬	정확한 위치 지정 및 정렬 가능
🧩 유연성	요소 크기 자동 조정	격자 기반 정확한 레이아웃

 

---

💡 2. 언제 Flexbox를 사용할까?

Flex는 다음과 같은 상황에서 강력한 효과를 발휘합니다.

• ✅ 내비게이션 바(Nav Bar) 정렬
• ✅ 버튼 그룹 정렬
• ✅ 가로/세로 가운데 정렬
• ✅ 반응형 카드 리스트

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

 

---

🧭 3. 언제 Grid를 사용할까?

Grid는 복잡한 레이아웃이 필요할 때 사용됩니다.

• 🎯 대시보드 레이아웃
• 🎯 사진 갤러리
• 🎯 정교한 칼럼 구조
• 🎯 모달, 섹션 분할 등 2차원 설계

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

 

---

🛠️ 4. 실무 예제 비교

✅ Flexbox 예시 - 반응형 카드 리스트

 

<div class="card-list">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>

 

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 30%;
}

 

🧱 Grid 예시 - 이미지 갤러리

<div class="gallery">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

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

 

---

🧠 5. 어떤 걸 선택해야 할까?

상황	추천 레이아웃
간단한 일렬 정렬	✅ Flexbox
정교한 행/열 구조	🧱 Grid
반응형 요소 정렬	✅ Flexbox
전체 페이지 레이아웃	🧱 Grid

 

---

📝 마무리 정리

• 🟢 Flexbox → 1차원 중심 정렬과 정렬용
• 🔵 Grid → 레이아웃 구조 설계용
• ✨ 실제 프로젝트에서는 두 개를 혼합해서 사용하는 경우가 많습니다!