CSS Grid vs Flexbox: 언제, 어떻게 사용할까?

CSS Grid vs Flexbox: 언제, 어떻게 사용할까?

CSS에서 레이아웃을 구성할 때, 우리는 주로 두 가지 강력한 도구를 사용한다. CSS Grid와 Flextbox 이 두 가지는 모두 레이아웃을 구성하는 데 매우 유용하지만, 각각의 사용 목적과 상황이 다르다.

1. CSS Grid와 Flexbox의 기본 개념

• CSS Grid는 2차원 레이아웃 시스템으로, 행(row)과 열(column) 모두를 제어할 수 있다. 복잡한 레이아웃을 설계할 때 매우 유용하며, 레이아웃의 전체적인 구조를 잡는 데 적합하다.
• Flexbox는 1차원 레이아웃 시스템으로, 한 줄(row) 또는 한 열(column)에서 아이템을 정렬하는 데 중점을 둔다. 주로 아이템 간의 정렬이나 배치에 초점을 맞추며, 작은 레이아웃 구성이나 콘텐츠의 정렬에 유용하다.

2. 언제 CSS Grid를 사용할까?

CSS Grid는 다음과 같은 경우에 적합하다:

• 2차원 레이아웃이 필요한 경우: 예를 들어, 웹 페이지의 전체 구조를 설계하거나, 복잡한 대시보드 레이아웃을 구성할 때 Grid가 유리하다.
• 정교한 레이아웃 제어가 필용한 경우: CSS Grid는 행과 열의 크기를 자유롭게 조정할 수 있어, 복잡한 레이아웃을 더 쉽게 설계할 수 있다.

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

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

.grid-item {
  background-color: #4caf50;
  padding: 20px;
  text-align: center;
  color: white;
  font-size: 1.5em;
}

이 예제에서는 3열 그리드를 사용하여 6개의 아이템을 배치했다. grid-template-columns를 사용하여 열의 개수와 크기를 설정하고, gap 속성으로 아이템 간의 간격을 지정했다.

3. 언제 Flexbox를 사용할까?

Flexbox는 다음고 같은 경우에 적합하다:

• 1차원 레이아웃이 필요한 경우: Flexbox는 한 방향(가로 또는 세로)으로 아이템을 배치하는 데 최적화되어 있다. 예를 들어, 네비게이션바나 버튼 그룹을 배치할 때 유용하다.
• 아이템 정렬과 배가 중요한 경우: Flexbox는 아이템을 중앙 정렬하거나 공간을 균등하게 배분하는 등의 작업을 쉽게 처리할 수 있다.

<div class="flex-container">
  <button class="btn">Button 1</button>
  <button class="btn">Button 2</button>
  <button class="btn">Button 3</button>
</div>

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

.btn {
  padding: 10px 20px;
  margin: 5px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

이 예제에서는 Flexbox를 사용하여 버튼들을 화면 중앙에 정렬했다. justify-content: center와 align-item: center 속성을 통해 수평 및 수직 방향으로 중앙 정렬을 쉽게 구현할 수 있다.

4. CSS Grid와 Flexbox를 함께 사용하는 방법

때로는 CSS Grid와 Flexbox를 결합하여 사용하는 것이 가장 효과적일 수 있다. 예를 들어, 전체 페이지 레이아웃을 Grid로 구성한 다음, 세부적인 아이템 정렬에 Flexbox를 사용할 수 있다.

<div class="grid-layout">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="content">
    <div class="content-item">Content 1</div>
    <div class="content-item">Content 2</div>
    <div class="content-item">Content 3</div>
  </main>
  <footer class="footer">Footer</footer>
</div>

.grid-layout {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #4caf50;
  color: white;
  padding: 20px;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: #2196f3;
  color: white;
  padding: 20px;
}

.content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.content-item {
  background-color: #f44336;
  color: white;
  padding: 20px;
  margin: 10px 0;
}

.footer {
  grid-area: footer;
  background-color: #555;
  color: white;
  text-align: center;
  padding: 10px;
}

이 예제에서는 전체 레이아웃을 Grid로 구성하고, content 영역 내의 아이템들을 Flexbox로 정렬했다. Grid는 페이지의 큰 구조를 관리하고, Flexbox는 세부적인 아이템 배치를 담당한다.

5. 결론

• CSS Grid는 2차원 레이아웃을 관리하고, 복잡한 페이지 구조를 설계하는 데 적합하다.
• Flexbox는 1차원 레이아웃에서 아이템을 정밀하고 배치하는 데 탁월하다.
• 이 두 가지 기술을 결합하면, 보다 유연하고 강력한 레이아웃을 구현할 수 있다.