CSS Grid와 Flexbox를 조합한 반응형 레이아웃 만들기｜실무형 예제 가이드

글쓴이 /

CSS Grid와 Flexbox는 각각의 강점을 살려 조합할 때 가장 강력한 반응형 레이아웃 도구가 됩니다.
이 글에서는 Grid로 전체 페이지의 큰 틀을 잡고, Flexbox로 내부 콘텐츠를 유연하게 배치하는 방법을 단계별 실습 예제와 함께 알아봅니다.
실무에서 바로 적용 가능한 팁도 함께 제공합니다.

왜 Grid + Flexbox 조합인가?

  • Grid: 2차원(행, 열)을 다루는 데 강함 → 페이지의 큰 틀을 정의
  • Flexbox: 1차원(가로 또는 세로)에 강함 → 컴포넌트 내부 배치에 최적
  • 단일 기술만으로는 유지보수가 복잡해질 수 있어, 둘을 혼합하는 것이 실무에서 가장 효율적임.

💡 Tip: Grid로 큰 뼈대를, Flexbox로 세부 콘텐츠를 잡으면 반응형 구현이 깔끔하고 유지보수가 쉽습니다.

기본 Grid 레이아웃 만들기

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 100vh;
}

.header {
  grid-column: 1 / 3;
  background: #f5f5f5;
}

.sidebar {
  background: #e0e0e0;
}

.main {
  background: #fff;
}

.footer {
  grid-column: 1 / 3;
  background: #f5f5f5;
}
CSS
<div class="container">
  <header class="header">헤더</header>
  <aside class="sidebar">사이드바</aside>
  <main class="main">메인 콘텐츠</main>
  <footer class="footer">푸터</footer>
</div>
HTML

구조 설명

  • grid-template-columns → 좌측 1열(사이드바), 우측 3열(메인 콘텐츠)
  • grid-template-rows → 상단 헤더, 중앙 콘텐츠, 하단 푸터
  • gap으로 영역 간 여백 조정

메인 콘텐츠 내부에 Flexbox 적용

메인 콘텐츠 영역은 카드, 버튼, 이미지 등 다양한 UI 요소를 담기 때문에 Flexbox로 배치합니다.

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

.card {
  flex: 1 1 calc(33.333% - 15px);
  background: #f9f9f9;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
}
CSS
<div class="main">
  <div class="cards">
    <div class="card">콘텐츠 1</div>
    <div class="card">콘텐츠 2</div>
    <div class="card">콘텐츠 3</div>
  </div>
</div>
HTML

📝 설명:

  • flex-wrap: wrap → 화면 크기가 작아지면 자동 줄바꿈
  • calc(33.333% - 15px) → 3열 구조를 유지하면서 gap 반영
  • 모바일에서는 자동으로 1~2열로 줄어들어 반응형이 자연스럽게 작동

미디어 쿼리로 반응형 세부 조정

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }

  .cards .card {
    flex: 1 1 calc(50% - 15px);
  }
}

@media (max-width: 480px) {
  .cards .card {
    flex: 1 1 100%;
  }
}
CSS
  • 768px 이하 → 사이드바를 아래로 이동, 카드 2열
  • 480px 이하 → 카드 1열

📱 RAO 팁:
최소한의 미디어 쿼리만 작성하고, 기본 구조는 Grid와 Flexbox의 유연성을 활용해 자동 반응형으로 설계하세요.

실무 적용 예시

  • 쇼핑몰 레이아웃 → Grid로 헤더, 사이드바, 메인 구조 / Flexbox로 상품 카드 정렬
  • 기업 홈페이지 → Grid로 페이지 틀 / Flexbox로 네비게이션, 배너, 버튼 배치
  • 블로그 레이아웃 → Grid로 전체 프레임 / Flexbox로 포스트 목록 구성

마무리

Grid와 Flexbox를 조합하면 복잡한 반응형 레이아웃도 단순하고 직관적으로 구현할 수 있습니다.
특히 Grid로 페이지의 전반적인 틀을, Flexbox로 내부 콘텐츠를 제어하면 유지보수성이 뛰어난 실무형 UI를 완성할 수 있습니다.
반응형 웹 개발의 핵심 스킬로 반드시 익혀두세요.

Summary in English

Learn how to build responsive web layouts using a combination of CSS Grid and Flexbox.
Use Grid to define the overall page structure and Flexbox to arrange internal components for a flexible, maintainable design.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

위로 스크롤