CSS 레이아웃 Flex와 Grid 혼합 설계 실무 패턴

 

 

CSS Flexbox는 일차원(1D) 정렬,
CSS Grid는 이차원(2D) 배치를 담당합니다.

 

✅ Grid → 페이지 전체 레이아웃
✅ Flex → 내부 구성 & 정렬

 

이 두 가지를 적절히 섞으면
“반응형 + 정렬 + 가독성 + 유지보수성”을 모두 잡을 수 있습니다 💪

---

📐 1. Grid로 전체 구조, Flex로 내부 정렬

 

<div class="layout">
  <header class="header">
    <div class="header-inner">
      <h1>Logo</h1>
      <nav>Menu</nav>
    </div>
  </header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

 

.layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

 

📌 Grid → 페이지 구조
📌 Flex → 헤더 내부 아이템 정렬

---

📊 2. 사이드바 + 메인 영역 패턴

 

<div class="wrapper">
  <aside>Sidebar</aside>
  <section class="content">
    <div class="card-list">
      <div>Card 1</div>
      <div>Card 2</div>
      <div>Card 3</div>
    </div>
  </section>
</div>

 

.wrapper {
  display: grid;
  grid-template-columns: 250px 1fr;
  height: 100vh;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card-list > div {
  flex: 1 1 calc(33.333% - 20px);
  background: #f4f4f4;
  padding: 20px;
}

 

📌 Grid → 큰 틀(aside + section)
📌 Flex → 카드 내부의 유연한 배치

---

🧩 3. 반응형 카드 레이아웃 (Flex → Grid 전환)

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cards > div {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

 

📌 작은 화면에서는 Flex로 유연하게 쌓기,
📌 큰 화면에서는 Grid로 정렬 정확도 높이기

 

→ 반응형 + 정렬 최적화의 베스트 조합 👏

---

🪄 4. Grid + Flex 카드 내부 정렬

 

<div class="product-card">
  <img src="item.jpg" alt="상품" />
  <div class="info">
    <h3>상품명</h3>
    <p>상품 설명</p>
    <div class="price-area">
      <span>₩29,000</span>
      <button>구매하기</button>
    </div>
  </div>
</div>

.product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

.price-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 

📌 Grid → 상하 구조 구분 (이미지/내용)
📌 Flex → 가격과 버튼 간격 정렬

---

⚙️ 5. 네비게이션 바 (Flex) + 콘텐츠 영역 (Grid)

 

<div class="dashboard">
  <nav class="nav">
    <ul>
      <li>홈</li>
      <li>통계</li>
      <li>설정</li>
    </ul>
  </nav>
  <main class="grid-content">
    <section>위젯 1</section>
    <section>위젯 2</section>
    <section>위젯 3</section>
  </main>
</div>

 

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 100vh;
}

.nav ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.grid-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

 

📌 Sidebar는 Flex로 세로 메뉴,
📌 Main은 Grid로 위젯형 카드 정렬

---

💡 실무 적용 포인트

역할	추천 방식	이유
전체 구조	Grid	레이아웃 명확성, 영역 지정 용이
내부 정렬	Flex	수평/수직 중앙 정렬 간편
카드 레이아웃	Flex → Grid 혼합	반응형 + 가독성
버튼 / 가격 / 탭	Flex	공간 균형, 정렬 최적
대시보드	Grid + Flex	그리드 틀 + 유연한 위젯 구성

---

⚡ 실무 꿀팁

✅ Flex 안에 Grid, Grid 안에 Flex → 자유롭게 중첩 가능
✅ minmax() + flex-wrap 조합으로 반응형 자동화
✅ align-items: stretch 활용 → 카드 동일 높이
✅ **CSS 변수(var)**로 Grid gap, column 수를 유동 관리

---

📝 마무리 정리

• Grid는 “뼈대”, Flex는 “근육”
• 구조를 Grid로 잡고, 정렬을 Flex로 보정
• 반응형 환경에서는 둘의 혼합이 필수

💡 요약 공식

🧩 큰 틀 = Grid
🎯 내부 정렬 = Flex
⚙️ 반응형 = minmax() + wrap