반응형
[HTML5&CSS3]
Grid Layout
(자바 풀스택 개발자를 위한 첫걸음)
📦 CSS Grid Layout 완전 정복
grid-template으로 카드 그리드 만들기
웹 서비스를 만들다 보면 카드형 UI를 반드시 만나게 됩니다.
게시판 목록, 쇼핑몰 상품, 관리자 대시보드 위젯까지
👉 대부분 Grid Layout으로 구성됩니다.
이 글에서는 CSS Grid의 핵심 속성 grid-template을 중심으로
카드 그리드를 직접 만들어보며 이해해봅니다.
1️⃣ Grid Layout이란?
CSS Grid는 행(row)과 열(column)을 동시에 설계하는 2차원 레이아웃 시스템이다.
| 구분 | Flexbox | Grid |
| 방향 | 1차원 | ✅ 2차원 |
| 카드 배치 | 불편 | ✅ 매우 편함 |
| 전체 레이아웃 | 제한적 | ✅ 최적 |
📌 카드 목록 레이아웃 = Grid
2️⃣ grid-template 핵심 개념
✅ grid-template-columns
열(column)의 개수와 너비를 정의
✅ grid-template-rows
행(row)의 개수와 높이를 정의
✅ 자주 쓰는 단위
- px : 고정 크기
- fr : 비율 단위
- repeat() : 반복
- minmax() : 최소 / 최대
🧪 예제 1. 가장 기본적인 카드 그리드 (3열)
📁 파일 구조
example1-basic/
├─ index.html
└─ style.css
📄 index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기본 카드 그리드</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid">
<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>
</body>
</html>🎨 style.css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
.card {
background-color: #f2f2f2;
padding: 40px;
text-align: center;
border-radius: 8px;
}
🔍 코드 설명
- repeat(3, 1fr) → 같은 너비 카드 3개
- 카드 수가 늘어나면 자동 줄바꿈
💡 활용 예
- 게시판 목록
- 공지사항 카드
🧪 예제 2. 고정 폭 카드 레이아웃
📁 파일 구조
example2-fixed/
├─ index.html
└─ style.css📄 index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>고정 폭 카드</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid">
<div class="card">고정 카드 1</div>
<div class="card">고정 카드 2</div>
<div class="card">고정 카드 3</div>
<div class="card">고정 카드 4</div>
</div>
</body>
</html>🎨 style.css
.grid {
display: grid;
grid-template-columns: 200px 200px 200px;
gap: 16px;
}💡 활용 예
- 관리자 페이지 메뉴
- 대시보드 위젯
🧪 예제 3. 비율 기반 레이아웃 (메인 + 사이드)
📁 파일 구조
example3-ratio/
├─ 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="grid">
<div class="card">메인 콘텐츠</div>
<div class="card">사이드바</div>
</div>
</body>
</html>🎨 style.css
.grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}🧪 예제 4. minmax 반응형 카드
🎨 style.css
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(150px, 1fr));
gap: 20px;
}💡 활용 예
- 모바일 대응 카드 UI
🧪 예제 5. 실무 핵심 카드 그리드 (auto-fill)
🎨 style.css
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}🔥 실무 포인트
- 화면 크기에 따라 카드 개수 자동 조절
- 쇼핑몰, 포트폴리오 필수 패턴
🧪 예제 6. 행(row)까지 제어하는 카드 그리드
🎨 style.css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
gap: 20px;
}7️⃣ Grid vs Flex (면접 한 줄 정리)
- 카드 목록 👉 Grid
- 한 줄 정렬 👉 Flex
- 전체 레이아웃 👉 Grid
✅ 백엔드 개발자 관점 한 줄 정리
Grid Layout은 백엔드에서 내려준 리스트 데이터를 프론트엔드에서 가장 안정적이고
예측 가능하게 표현하는 레이아웃 도구다.
반응형
'[부트캠프] 풀스택 개발자 > HTML 기초' 카테고리의 다른 글
| [HTML5&CSS3] 반응형 웹 개념 (0) | 2026.01.23 |
|---|---|
| [HTML5&CSS3] Grid vs Flex (0) | 2026.01.22 |
| [HTML5&CSS3] Flexbox 실전 패턴 (0) | 2026.01.20 |
| [HTML5&CSS3] Flexbox 기본 (0) | 2026.01.19 |
| [HTML5&CSS3] z-index 이해 (0) | 2026.01.18 |
