CSS Grid Flexbox 차이점

CSS grid flexbox 차이점에 대해 알아보겠습니다. 웹 디자인에 큰 변화를 일으킨 2개의 레이아웃 도구인 그리드와 플렉스박스는 개발자 스스로 해킹이나 플로트에 의존하지 않고도 복잡하지만 반응이 빠른 디자인을 만들 수 있게 도와줍니다. 레이아웃 구성에 쓰이는 목적이라는 것은 같지만 각자의 영역이 있기 때문에 사용 예시, 차이점, 프로젝트에 쓰이는 용도 등을 알아보겠습니다.

Table of Contents

CSS Grid?

css gird(그리드)는 행과 열로 웹페이지를 디자인 할 수 있는 2차원적 레이아웃 시스템입니다. 그리드 내의 요소 배치를 세밀하게 제어할 수 있다는 장점이 있으며 행과 열을 동시 처리해서 복잡하거나 구조화된 레이아웃을 만들 때 사용하면 좋습니다.

<!DOCTYPE html><html lang="ko">
<head>
  <title>CSS Grid 그리드 예시</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: auto;
      gap: 10px;
    }
    .grid-item {
      background-color: #f2f2f2;
      padding: 20px;
      text-align: center;
    }
  </style></head><body>
  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>
</body>
</html>

위의 코드에서 ‘grid-template-colums’는 사용할 수 있는 공간의 1부분, 2부분, 1부분의 3가지 열을 의미합니다. 그리고 ‘gap’은 그리드 항목 사이의 간격을 추가한다는 의미입니다.

Flesbox?

flexbox(플렉스박스)는 Flexible Box Layout의 약자로 행과 열을 따라 항목을 정렬하고 배포하도록 만들어진 1차원적 레이아웃 시스템입니다. 단일 축(행 or 열)을 따라 항목을 정렬해 주며 작은 콘텐츠 구성에 적합한 방법입니다.

<!DOCTYPE html><html lang="ko"><head>
  <title>Flexbox 예시입니다</title>
  <style>
    .flex-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f2f2f2;
      padding: 20px;
    }
    .flex-item {
      padding: 10px;
      background-color: #ddd;
    }
  </style></head><body>
  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div></body></html>

위 코드에서 ‘justify-content’는 항목 사이에 공백을 두고 해당 항목을 수평으로 정렬해 주며 ‘align-items’는 컨테이너 내에서 수직으로 중앙에 놓이게 됩니다.

CSS Grid Flexbox 차이점 비교

CSS grid flexbox 차이점을 담은 표를 확인해 보세요!

기능	CSS Grid	Flexbox
차원	2차원(행, 열)	1차원(행 or 열)
사용 용도	복잡한 페이지 레이아웃	소규모 or UI 항목
정렬	그리드 셀 전체에 걸쳐 쉽게 정렬	단일 축 내에서 유연하게 정렬
아이템 배치	명시적인 그리드 기반 위치 지정	내용에 따른 자동 위치
반응도	미디어 쿼리와 정상 작동	적응력이 좋아 즉시 사용 가능

1. 그리드를 사용하는 경우

복잡한 레이아웃 : 행과 열이 있는 전체 페이지의 레이아웃을 디자인 하는데에 적합합니다.
정확한 제어가 필요할 때 : 수직, 수평 배치를 모두 컨트롤 해야 하는 경우 사용합니다.
일관성 정렬 : 콘텐츠 크기에 상관 없이 그리드의 모든 요소를 깔끔하게 정렬할 때 사용합니다.

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 100px 1fr 50px;
}

2. 플렉스박스를 사용하는 경우

구성 요소 레이아웃 : 탐색 모음, 버튼, 카드 등과 같은 구성 및 요소에 적합하게 쓰입니다.
정렬 : (단일)한 축을 따라 간단하게 정렬하려는 경우 사용합니다.
동적인 콘텐츠 : 콘텐츠 크기를 예측할 수 없을 때 플렉스박스로 자연스럽게 사용합니다.

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

3. grid flexbox 함께 사용하는 경우

그리드(gird)와 플렉스박스(flexbox)는 함께 사용할 수도 있는데요. 전체 레이아웃에 그리드를 사용하고 특정 부분의 미세 조종이 필요할 때 플렉스 박스를 사용하면 됩니다.

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main-content">
    <div class="flex-container">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
    </div>
  </div>
  <div class="footer">Footer</div></div>

CSS grid 및 Flexbox FAQ

그리드랑 플렉스박스 같이 쓸 수 있나요?

네 가능합니다. 전체 구조에는 그리드를, 개별 요소나 작은 레이아웃에서는 플렉스박스를 이용하면 됩니다.

완전 개발 초보인데 어떤 레이아웃이 좋나요?

처음 해보시는 분들은 하나에 초점을 맞추는 플렉스 박스를 더 쉽게 사용할 수 있습니다.

반응형 디자인에는 어떤 레이아웃을 써야 하나요?

반응형에는 css grid를 사용하는 것이 좋고 ‘fr’ 단위나 미디어 쿼리에 적합합니다.

내용 총 정리

지금까지 CSS grid flexbox 차이점에 대해 알아보았는데요. 어떤 프로젝트의 레이아웃을 구성하느냐에 따라 사용 여부를 선택하면 되고 보통은 복잡한 2차원 레이아웃에는 그리드, 간단한 1차원 레이아웃에는 플렉스 박스를 사용해 보시면 됩니다. 또한, grid, flexbox 2개를 동시에 사용하는 방법도 있으니 연습 삼아 시도해 보시기 바랍니다.