CSS Grid ✅ 실무에서 바로 쓰는 5가지 레이아웃 패턴

 

 

CSS Grid는 2차원(행 + 열) 레이아웃을 완벽하게 제어할 수 있는 강력한 도구입니다.
이 포스팅에서는 단순한 정렬을 넘어서, 실무에서 자주 쓰는 패턴 예시를 소개해봅니다.

---

🧱 1. 기본 레이아웃 패턴 (Header / Main / Aside / Footer)

<div class="grid-layout">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>​

 

.grid-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "aside main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  gap: 10px;
}

header { grid-area: header; }
aside { grid-area: aside; }
main { grid-area: main; }
footer { grid-area: footer; }

 

📌 실무 활용

관리자 페이지, 블로그, 대시보드 기본 구조

---

🧭 2. 카드형 그리드 (반응형 갤러리 / 쇼핑몰)

 

<div class="card-grid">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

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

 

📌 설명

• auto-fit + minmax() 조합 → 반응형 카드 자동 정렬
• 모바일 ~ 데스크탑까지 자연스럽게 1~4열 구성

---

🎯 3. Holy Grail Layout (고전적 3단 구조)

<div class="holy-grail">
  <header>Header</header>
  <nav>Menu</nav>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

 

.holy-grail {
  display: grid;
  grid-template:
    "header header header" 80px
    "nav main aside" 1fr
    "footer footer footer" 60px /
    200px 1fr 200px;
  gap: 10px;
}

 

📌 실무 활용

신문형, 대시보드형, 정보가 많은 관리자 화면

---

🧩 4. Masonry 레이아웃 (불규칙 카드 높이)

Pinterest 스타일 레이아웃 구현 가능 💡

 

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 10px;
  gap: 10px;
}

.masonry > div {
  background: #dfe6e9;
  border-radius: 8px;
  padding: 10px;
  grid-row: span var(--rows);
}

 

📌 grid-auto-rows와 grid-row: span 조합으로
카드 높이에 따라 불규칙한 배치 연출 가능

---

🧠 5. 카드 + 사이드바 혼합형 (실무에서 가장 많이 씀)

 

<div class="mixed-layout">
  <aside>Sidebar</aside>
  <section class="cards">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </section>
</div>

 

.mixed-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

 

📌 Sidebar + Card 조합 → 대시보드, 관리자 페이지, 이커머스에 자주 사용

---

⚡ 실무 활용 팁

✅ Grid + Flex 혼합 설계

• 큰 틀은 Grid, 내부 정렬은 Flex로 구성
• 예: .card 내부 요소 중앙정렬 시 display: flex; align-items: center;

✅ auto-fit vs auto-fill 차이 이해하기

• auto-fit: 빈 칸까지 줄이기 → “가변형 반응형”
• auto-fill: 빈 칸 유지 → “고정 그리드 느낌”

✅ 반응형 기준

 

@media (max-width: 768px) {
  .grid-layout {
    grid-template-areas:
      "header"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

---

📝 마무리 정리

• CSS Grid는 레이아웃 설계의 중심 도구
• grid-template-areas로 직관적 구조화 가능
• minmax() + auto-fit 조합으로 반응형 자동 구성
• 실무에서는 Grid와 Flex를 적절히 혼합 설계하는 게 핵심