[TECH-QA] Flex와 Grid 비교

Posted 4 months Updated 4 months

By 베짱이가 되고싶은 개미。

Flex (Flexbox)

단일 방향(행 또는 열)으로 아이템을 배치.
아이템의 크기가 동적으로 변할 수 있어 반응형 디자인에 유리.
간단한 정렬과 공간 분배에 강력.

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    justify-content: space-between; /* 아이템 간 간격을 균등하게 분배 */
    background-color: #f0f0f0;
  }
  .flex-item {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    margin: 10px;
    text-align: center;
  }
</style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
</body>
</html>

위 예제에서 .flex-container는 display: flex를 통해 가로 방향으로 아이템을 배치합니다. justify-content: space-between 속성은 아이템 사이의 공간을 균등하게 나누어 배치합니다. 결과적으로 세 개의 박스가 수평으로 나란히 정렬됩니다.

Grid

grid는 2차원 그리드 시스템을 구성하는 데 사용되며, 수평(가로)과 수직(세로) 방향 모두를 고려한 레이아웃을 설계할 수 있습니다. 각 셀의 크기를 미리 정의하여 일관된 구조를 유지하며, 복잡한 레이아웃에 적합합니다.

행(row)과 열(column)을 모두 정의 가능.
셀 크기를 고정하거나 비율로 설정하여 일정한 구조 유지.
레이아웃 변화가 적은 정적인 디자인에 적합.

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px 100px; /* 3열, 각 100px */
      grid-template-rows: 80px 80px; /* 2행, 각 80px */
      gap: 10px; /* 셀 간 간격 */
      background-color: #f0f0f0;
    }
    .grid-item {
      background-color: #2196F3;
      color: white;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <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>
</body>
</html>

위 예제에서는 grid-container가 2x2 그리드 구조를 형성합니다. grid-template-columns: 1fr 1fr로 두 개의 열을 동일한 비율로 나누고, grid-template-rows로 행 높이를 100px로 고정했습니다. gap 속성으로 셀 사이에 10px 간격을 추가했습니다.

Grid는 반응형에 적합한가?

grid는 반응형 디자인에 매우 강력한 도구입니다. 미리 정의된 구조를 유지한다는 점은 고정된 레이아웃에 유리하다는 의미일 뿐, 반응형으로 동적으로 조정하는 데도 탁월합니다. CSS Grid는 다음과 같은 기능을 통해 반응형을 지원합니다

fr 단위: 유연한 비율로 열/행 크기를 정의.
minmax() 함수: 최소/최대 크기를 설정해 콘텐츠에 따라 적응.
auto-fit / auto-fill: 열 개수를 화면 크기에 따라 자동으로 조정.
미디어 쿼리: 화면 크기에 따라 그리드 구조를 변경.

<!DOCTYPE html>
<html>
<head>
<style>
  .grid-container2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }

.item {
  background-color: lightgreen;
  padding: 20px;
  text-align: center;
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* 작은 화면에서는 1열로 */
  }
}
</style>
</head>
<body>
 <div class="grid-container2">
  <div class="item">아이템 1</div>
  <div class="item">아이템 2</div>
  <div class="item">아이템 3</div>
  <div class="item">아이템 4</div>
  <div class="item">아이템 5</div>
  <div class="item">아이템 6</div>
 </div>
</body>
</html>







 
  아이템 1
  아이템 2
  아이템 3
  아이템 4
  아이템 5
  아이템 6

auto-fit: 사용 가능한 공간에 따라 열을 자동으로 채움.
minmax(150px, 1fr): 각 열의 최소 너비는 150px, 최대는 남은 공간을 비율로 나눔.
결과: 화면이 넓으면 여러 열로 배치되고, 좁아지면 열이 줄어듦.
화면 너비가 600px 이하일 때 1열로 강제 전환.

큰 화면에서는 아이템이 여러 열로 나열되고, 작은 화면에서는 자동으로 한 열로 정렬되어 반응형 레이아웃이 구현됨.