Flexbox vs CSS Grid – 언제 뭘 써야 하는 걸까?

 

 

 

웹 레이아웃을 만들다 보면 display: flex와 display: grid,
둘 중에 어떤 걸 써야 할지 고민될 때가 많죠?

둘 다 정말 강력한 CSS 레이아웃 도구지만,
방식이 완전히 다르고, 잘 쓰면 작업 효율이 확 달라져요.

이번 글에서는 Flexbox와 CSS Grid의 차이점, 언제 어떤 상황에서 쓰면 좋은지 쉽게 정리해볼게요!

---

✅ 둘 다 레이아웃 도구예요! 그런데 구조가 달라요

항목	Flexbox	Grid
정렬 방식	1차원(한 줄 또는 한 열)	2차원(행과 열 동시에)
사용 목적	콘텐츠 흐름대로 정렬	정확한 영역 배치
배치 기준	아이템 순서 중심	위치 중심 (그리드 영역 지정)
대표 용도	메뉴바, 버튼 정렬, 카드 나열 등	전체 페이지 레이아웃, 포털형 구성 등

 

---

🧭 Flexbox가 잘 어울리는 상황은?

Flexbox는 콘텐츠를 자연스럽게 정렬할 때 딱이에요.

예를 들어 이런 경우에 좋아요:

• 가로/세로 방향 정렬이 필요한 메뉴
• 가운데 정렬이나 요소 간 간격 조정이 필요할 때
• 반응형 카드 리스트, 버튼 그룹 등

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

---

📐 Grid가 빛나는 순간은?

Grid는 레이아웃 전체를 구조화할 때 진가를 발휘해요.

예를 들어 이런 경우에 적합해요:

• 페이지 전체를 나누는 구조: 헤더, 본문, 사이드바, 푸터
• 정확하게 나누어진 격자형 레이아웃 만들기
• 반복되는 열/행 구성 (갤러리, 뉴스 페이지 등)

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

---

✨ Flex랑 Grid는 같이 써도 돼요!

꼭 하나만 써야 하는 건 아니에요.
바깥 레이아웃은 Grid, 내부 정렬은 Flex 이런 식으로 조합해서 쓰면 정말 유연하게 구성할 수 있어요.

.layout {
  display: grid;
  grid-template-columns: 1fr 4fr;
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

---

📌 마무리 정리

이런 상황이면...	추천
콘텐츠 순서대로 정렬하고 싶다	✅ Flexbox
전체 레이아웃을 구획 나누고 싶다	✅ CSS Grid
가운데 정렬, 정렬 자동화가 목적이다	✅ Flexbox
요소 위치를 직접 지정하고 싶다	✅ CSS Grid