본문 바로가기
[부트캠프] 풀스택 개발자/HTML 기초

[HTML5&CSS3] Grid vs Flex

by 다니엘(Daniel) 2026. 1. 22.
반응형

[HTML5&CSS3] 

Grid vs Flex

(자바 풀스택 개발자를 위한 첫걸음)

 

 

Grid vs Flex

👉 언제 Grid를 쓰고, 언제 Flex를 써야 할까? (사용 기준 완전 정리)

웹 레이아웃을 배우다 보면 가장 많이 듣는 질문이 있습니다.

❓ “Grid랑 Flex 중에 뭘 써야 하나요?”

 

결론부터 말하면 둘 다 중요하고, 목적이 다릅니다.
이 글에서는 “어떤 상황에서 무엇을 써야 하는지”를 명확하게 정리합니다.

1️⃣ 이론 – Grid와 Flex의 핵심 차이

Flexbox란?

  • 1차원 레이아웃
  • 한 방향(가로 또는 세로) 정렬에 최적
  • 요소 간 정렬, 간격 조절에 강함

👉 한 줄(또는 한 열) 배치

Grid란?

  • 2차원 레이아웃
  • 행(Row) + 열(Column)을 동시에 제어
  • 전체 페이지 구조 설계에 적합

👉 화면 전체 틀(layout) 설계

🔑 한 줄 요약 기준

 

상황 추천
메뉴, 버튼 정렬 Flex
카드 목록, 갤러리 Grid
페이지 전체 구조 Grid
아이템 내부 정렬 Flex

2️⃣ 예제 1 – 버튼 정렬 (Flex가 정답)

📌 상황

  • 버튼 3개를 가로로 정렬 + 가운데 배치

📁 파일 구조

example1-flex-buttons/
 ├─ index.html
 └─ style.css

📄 index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Flex 버튼 정렬</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="button-wrap">
    <button>확인</button>
    <button>취소</button>
    <button>닫기</button>
  </div>
</body>
</html>

🎨 style.css

body {
  margin: 0;
  height: 100vh;
}

.button-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: 100%;
}
 

💡 코드 설명

  • display: flex → 가로 정렬
  • justify-content: center → 가로 가운데
  • align-items: center → 세로 가운데
  • 1차원 정렬이므로 Grid는 과함

✅ 활용 예

  • 모달 버튼
  • 로그인 버튼 묶음
  • 관리자 페이지 액션 버튼

3️⃣ 예제 2 – 카드 목록 (Grid가 더 적합)

📌 상황

  • 상품 카드 6개를 2열 x 여러 행으로 배치

📁 파일 구조

example2-grid-cards/
 ├─ index.html
 └─ style.css

📄 index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Grid 카드</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card-grid">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
    <div class="card">Card 5</div>
    <div class="card">Card 6</div>
  </div>
</body>
</html>

🎨 style.css

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 20px;
}

.card {
  background: #e3f2fd;
  padding: 40px;
  text-align: center;
}

💡 코드 설명

  • grid-template-columns → 열 기준 레이아웃
  • 행은 자동 생성
  • Flex로 만들면 계산이 복잡해짐

✅ 활용 예

  • 상품 목록
  • 게시글 리스트
  • 이미지 갤러리

4️⃣ 예제 3 – 페이지 전체 구조 (Grid 필수)

📌 상황

  • Header / Sidebar / Content / Footer

📁 파일 구조

example3-grid-layout/
 ├─ index.html
 └─ style.css

📄 index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Grid 레이아웃</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="layout">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Content</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

🎨 style.css

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "aside main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 60px;
  height: 100vh;
}

header { grid-area: header; background: #90caf9; }
aside { grid-area: aside; background: #bbdefb; }
main { grid-area: main; background: #e3f2fd; }
footer { grid-area: footer; background: #90caf9; }

💡 코드 설명

  • grid-template-areas → 시각적 구조 파악 쉬움
  • 페이지 뼈대는 Grid가 압도적으로 유리

✅ 활용 예

  • 관리자 페이지
  • CMS
  • 대시보드

5️⃣ 예제 4 – 카드 내부 정렬 (Grid + Flex 조합)

📌 상황

  • 카드 배치는 Grid
  • 카드 내부는 Flex

📁 파일 구조

example4-mix/
 ├─ index.html
 └─ style.css

📄 index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Grid + Flex</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="cards">
    <div class="card">
      <h3>상품</h3>
      <button>구매</button>
    </div>
    <div class="card">
      <h3>상품</h3>
      <button>구매</button>
    </div>
  </div>
</body>
</html>

🎨 style.css

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #e3f2fd;
}

💡 코드 설명

  • 바깥 구조 → Grid
  • 안쪽 정렬 → Flex
  • 실무에서 가장 많이 쓰는 패턴

6️⃣ 예제 5 – 세로 메뉴 정렬 (Flex)

📌 상황

  • 사이드 메뉴 세로 정렬

📁 파일 구조

example5-flex-menu/
 ├─ index.html
 └─ style.css

📄 index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Flex 메뉴</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="menu">
    <a href="#">Home</a>
    <a href="#">Profile</a>
    <a href="#">Logout</a>
  </nav>
</body>
</html>

🎨 style.css

.menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

💡 코드 설명

  • flex-direction: column
  • 한 방향 정렬 → Flex가 최적

✅ Grid vs Flex 최종 사용 기준 정리


기준 선택
레이아웃 뼈대 Grid
한 줄 정렬 Flex
2차원 배치 Grid
내부 요소 정렬 Flex
실무 Grid + Flex 조합

✅ 백엔드 개발자 관점 한 줄 정리

Grid는 화면 구조를 빠르게 이해하게 해주고, Flex는 컴포넌트 단위 재사용성을 높여 협업과 유지보수를 쉽게 만든다.

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'[부트캠프] 풀스택 개발자 > HTML 기초' 카테고리의 다른 글

[HTML5&CSS3] 모바일 퍼스트  (0) 2026.01.24
[HTML5&CSS3] 반응형 웹 개념  (0) 2026.01.23
[HTML5&CSS3] Grid Layout  (0) 2026.01.21
[HTML5&CSS3] Flexbox 실전 패턴  (0) 2026.01.20
[HTML5&CSS3] Flexbox 기본  (0) 2026.01.19

관련글

티스토리툴바