CSS Grid vs Flexbox 언제 무엇을 사용하는게 좋을까?

✅ Grid 와 Flexbox의 차이를 알아보자!

비교	Grid	Flexbox
레이아웃 유형	2차원 (행 + 열)	1차원 (행 또는 열)
주로 사용하는 경우	전체 페이지 /  큰 구조	작은 UI 요소 정렬
배열 방식	grid-template-rows grid-template-columns	flex-direction 으로 한 방향 정렬
정렬 방식	justify-items align-items	justify-items align-items

---

❓ 언제 Grid를 사용해야할까?

• 전체 페이지 레이아웃을 구성할 때
• 복잡한 카드 UI 레이아웃을 짤 때
• 행(row)과 열(column)을 동시에 정렬해야할 때

Grid를 적용한 예제코드

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

---

❓ 언제 Flexbox를 사용해야할까?

• 버튼 그룹, 네비게이션 바처럼 한 줄 정렬이 필요할 때
• 콘텐츠를 가운데 정렬해야할 때
• 동적으로 크기가 변하는 요소들을 정렬할 때

Flexbox를 적용한 예제코드

<div class="flex-container">
  <div class="flex-item">Flexbox</div>
</div>

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

.flex-item {
  padding: 20px;
  background-color: coral;
}

---

Grid와 Flexbox 선택 기준 (기능별 추천 CSS)

기능	추천
전체적인 페이지 레이아웃	Grid
수평 정렬이 필요한 경우	Flexbox
행과 열을 동시에 정렬	Grid
작은 UI 요소 간의 정렬	Flexbox

---

사실 Grid와 Flexbox를 혼합해 사용하면 더욱 탄탄하게 퍼블리싱할 수 있습니다.

필요한 상황에 따라 적절하게 활용해보세요!