[CSS] Grid vs Flexbox: 어떤 상황에서 어떤 걸 선택해야 할까?

 

CSS 레이아웃을 구성할 때 Grid와 Flexbox는 가장 많이 사용되는 두 가지 도구입니다. 하지만 각각의 특징과 활용법을 이해하지 못하면 언제 어떤 것을 써야 할지 헷갈릴 수 있습니다. 그러므로 CSS Grid와 Flexbox의 차이점을 비교하고, 각각을 언제 사용해야 하는지 살펴보겠습니다.

---

기본개념

Grid	Flex
CSS Grid는 2차원(행과 열) 레이아웃 시스템입니다. 부모 요소가 전체 레이아웃을 설정하며, 자식 요소들을 격자(grid) 구조에 배치할 수 있습니다.	Flexbox는 1차원(가로 또는 세로) 레이아웃 시스템입니다. 요소를 행(Row) 또는 열(Column) 방향으로 배치하고 정렬할 때 유용합니다.
행(Row)과 열(Column) 모두를 조정 가능 정렬과 배치가 직관적 복잡한 레이아웃에 유리	한 방향(가로 또는 세로) 정렬이 쉬움 유연한 크기 조정이 가능 요소 간 간격을 조정하는 기능이 강력

---

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

2차원 레이아웃을 만들 때

• 예: 카드 레이아웃, 대시보드, 갤러리, 전체 페이지 레이아웃

행과 열을 동시에 조정해야 할 때

• 예: 정해진 틀 안에서 여러 개의 요소를 정렬하는 경우

비율을 맞추고 싶은 경우

• 예: grid-template-columns: 1fr 2fr 1fr;을 사용하여 특정 열의 크기를 유동적으로 설정할 때

👉 추천 사용 예제: 화면 크기에 따라 자동으로 조정되는 반응형 갤러리

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

 

언제 Flexbox를 사용해야 할까?

1차원 정렬(가로 또는 세로)만 필요할 때

• 예: 내비게이션 바, 버튼 그룹, 카드 리스트

요소 간의 정렬을 유연하게 조정해야 할 때

• 예: justify-content: space-between;을 사용해 요소 간 간격을 자동 조정

레이아웃이 동적인 크기를 가질 때

• 예: 특정 아이템이 늘어나거나 줄어드는 경우

👉 추천 사용 예제: 내비게이션 바 (내비게이션 아이템이 자동으로 양쪽 끝으로 정렬)

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

---

결론: 언제 어떤 걸 써야 할까?

✔ 웹사이트의 기본 레이아웃을 만들 때? → CSS Grid
✔ 네비게이션 바, 버튼 그룹처럼 단순한 배치를 할 때? → Flexbox
✔ 복잡한 그리드 시스템이 필요할 때? → CSS Grid
✔ 요소 간 간격과 정렬을 다룰 때? → Flexbox

 

🌟 실무에서는 CSS Grid와 Flexbox를 함께 사용하는 경우가 많습니다!
예를 들어 전체 페이지 레이아웃은 Grid로 만들고, 내부의 작은 요소 정렬은 Flexbox를 사용하는 식으로 조합할 수 있습니다.

🎯 핵심 요약

• Grid는 **2차원 레이아웃(행+열)**에 적합
• Flexbox는 **1차원 정렬(가로 또는 세로)**에 적합
• 둘 다 적절히 조합해서 사용하면 최적의 결과를 얻을 수 있음!