실전 예제 – Grid로 반응형 카드형 갤러리 만들기

 

 

이제까지 Grid의 핵심 속성들과 고급 기능들을 배워봤다면,
이번엔 그걸 활용해서 반응형 카드 갤러리 레이아웃을 직접 만들어볼 차례예요!

auto-fit + minmax + gap + grid-template-columns
이 조합으로 깔끔하고 유연한 그리드 레이아웃을 완성할 수 있어요.

---

 

✅ 목표 레이아웃

• 가로폭이 넓을 땐 4~5열 카드
• 좁아지면 자동으로 3열 → 2열 → 1열로 유연하게 변신
• 카드 간격은 gap, 크기는 minmax()로 관리

---

 

🧱 HTML 구조

<div class="gallery">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">6</div>
</div>

 

---

 

🎨 CSS 스타일

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

.card {
  background: #ffe4b5;
  padding: 40px 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 1.2rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

 

---

 

🧠 속성 설명 복습

속성	설명
repeat(auto-fit, minmax(220px, 1fr))	카드가 줄어들면 자동으로 줄바꿈
gap	카드 간의 간격
1fr	남는 공간을 균등 분배
minmax()	최소 크기를 보장하면서 유동적으로 확장

 

---

 

✅ 이 레이아웃의 장점

• 미디어쿼리 없이 반응형 완성
• 갤러리, 블로그 카드, 상품 리스트에 다 활용 가능
• 간단한 구조 + 시각적 정돈