CSS Grid와 Flexbox 비교

웹 레이아웃 구현에는 주로 Grid와 Flexbox가 사용됩니다. 저는 Flexbox만 사용하다 보니 다른 팀원이 Grid를 사용할 때 늘 헷갈리더라고요. 차이점도 확실히 알아볼 겸, 이 글에서는 CSS Grid와 Flexbox의 개념, 사용 예시, 차이 등을 정리하고자 합니다.

---

CSS Grid / Flexbox 란?

CSS Grid

CSS Grid는 2차원 레이아웃 (가로 세로 두 방향) 시스템으로, 행과 열을 모두 고려한 복잡한 레이아웃을 쉽게 작성할 수 있습니다. 

Flexbox

Flexbox는 1차원 레이아웃 (수평 수직 한 방향) 시스템으로, 단일 행 또는 열의 정렬과 공간 분배에 최적화되어 있습니다.

---

사용 예시

CSS Grid

그리드 예시 결과

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

/*------------CSS-----------*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.grid-item {
  outline: 2px solid; 
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

 

Flexbox

플렉스박스 예시 결과

<!----------html----------->
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

/*------------CSS-----------*/
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-item {
  outline: 2px solid;
  background-color: #ccc;
  padding: 20px;
  text-align: center;
  flex: 1;
}

---

지원 범위, 장단점

CSS Grid

Grid Layout의 지원 범위, IE11등은 -ms- 접두사를 사용하는 구형 구문을 필요로 한다.

- 장점: 2차원 레이아웃에 적합, 명확한 아이템 배치

- 단점: 초기 설정이 복잡, 단일 축 레이아웃에는 불필요하게 복잡

Flexbox

Flexbox의 지원 범위, 일부 구형 브라우저에서도 사용할 수 있다.

- 장점: 1차원 레이아웃에 적합, 간단한 설정과 유연한 정렬

- 단점: 2차원 레이아웃에 한계, 행과 열 간격 제어가 제한적

---

📝결론

전체 페이지 레이아웃, 복잡한 그리드 기반 디자인은 CSS Grid를 사용하고, 단일 행 또는 열의 정렬, 간단한 레이아웃에는 Flexbox의 사용이 더욱 적합하다. 각자의 장단점이 있으니 상황에 맞게 활용하는 것이 가장 좋다. CSS Grid와 Flexbox의 자세한 사용 방법은 추후 다른 글에서 정리 예정!

 

참조

CSS 레이아웃 -Grid, Flex 차이 및 기본 개념 

CSS Flex VS Grid

Flex와 Grid: 레이아웃에 최적화된 CSS 도구 비교

can I use?