5. 🧱 CSS Grid로 레이아웃 설계하기 — 2차원 배치의 끝판왕

---

Flexbox로 가로·세로 정렬이 쉬워졌지만,
Grid Layout은 그 이상의 세계를 열었다.

이번 글에서는 CSS Grid의 핵심 문법과 실전 활용법을
한눈에 이해할 수 있도록 정리했다.

Grid를 마스터하면, 디자인 툴처럼 정교한 웹 레이아웃을 코드로 구현할 수 있다.

---

💡 1. CSS Grid란?

“Grid는 행(Row)과 열(Column) 기반으로 요소를 배치하는 2차원 레이아웃 시스템이다.”

Flexbox는 한 줄(row 또는 column) 정렬에 탁월하지만,
Grid는 행과 열을 동시에 제어할 수 있다.

✅ 즉,

• 웹 전체 구조 설계
• 대시보드, 포털, 미디어 페이지 등
  정교한 배치에 적합하다.

---

🧱 2. 기본 구조

<div class="grid-container"> 
  <div class="item">1</div> 
  <div class="item">2</div> 
  <div class="item">3</div> 
  <div class="item">4</div> 
</div> 

.grid-container { 
  display: grid; 
  grid-template-columns: 100px 100px 100px; 
  grid-template-rows: 80px 80px; 
  gap: 10px; 
} 

✅ 결과:
3열 × 2행의 격자 형태 생성
각 셀은 자동으로 순서대로 배치된다.

---

🧩 3. grid-template-columns & rows

“Grid의 행과 열 크기를 정의하는 핵심 속성”

grid-template-columns: 200px 1fr 2fr; 
grid-template-rows: 100px auto; 

단위 설명 예시

px	고정 크기	100px
%	부모 기준 비율	50%
fr	남은 공간 비율 단위	1fr 2fr
auto	콘텐츠 크기 자동 조절	auto
minmax()	최소~최대 크기 지정	minmax(150px, 1fr)

💬 fr 단위는 Grid의 진짜 핵심이다.
자동으로 남은 공간을 비율에 따라 분배한다.

---

⚙️ 4. repeat() 함수 — 반복 패턴 간단히

grid-template-columns: repeat(3, 1fr); 

✅ 위 코드는
1fr 1fr 1fr과 동일하다.
💡 반복되는 구조에서 매우 효율적.

---

🧮 5. gap 속성 — 행과 열 간격

.grid-container { 
  gap: 20px; /* row + column 간격 동시에 */ 
} 

또는 각각 지정 가능 👇

row-gap: 10px; 
column-gap: 20px; 

💬 이전에는 margin으로 간격을 맞췄지만,
Grid에서는 gap 하나로 간단하게 해결된다.

---

🧱 6. 아이템 크기 제어 — grid-column & grid-row

특정 아이템을 여러 칸 차지하게 만들 수 있다.

.item:nth-child(1) { 
  grid-column: 1 / 3; /* 1번째 ~ 2번째 열까지 */ 
  grid-row: 1 / 2;   /* 1번째 행만 */ 
} 

✅ 즉, “셀 병합(Merge)”과 같은 효과를 낸다.

💡 예시:
뉴스 포털의 메인 기사 영역을 크게 잡을 때 사용.

---

🎯 7. grid-template-areas — 레이아웃 설계의 핵심

“시각적으로 레이아웃을 표현하는 방법”

.grid-container { 
  display: grid; 
  grid-template-areas: 
    "header header header" 
    "sidebar main main" 
    "footer footer footer"; 
  grid-template-columns: 200px 1fr 1fr; 
  grid-template-rows: 60px auto 60px; 
  gap: 10px; 
} 
 
.header { grid-area: header; background: skyblue; } 
.sidebar { grid-area: sidebar; background: lightgray; } 
.main { grid-area: main; background: white; } 
.footer { grid-area: footer; background: #ddd; } 

<div class="grid-container"> 
  <div class="header">Header</div> 
  <div class="sidebar">Sidebar</div> 
  <div class="main">Main Content</div> 
  <div class="footer">Footer</div> 
</div> 

✅ 결과:
3x3 구조에서 header, sidebar, main, footer가 명확히 구분된 구조.
시각적으로도 코드를 한눈에 파악 가능.

---

🧠 8. 정렬 속성 — justify-items / align-items

속성 설명 예시

justify-items	가로 정렬	center, start, end, stretch
align-items	세로 정렬	center, start, end, stretch

.grid-container { 
  justify-items: center; 
  align-items: center; 
} 

💡 전체 셀의 내용이 중앙 정렬된다.
Flexbox의 justify-content, align-items와 유사하지만,
Grid는 셀 내부 기준으로 작동한다.

---

⚙️ 9. justify-content / align-content

“Grid 전체를 정렬할 때 사용한다.”

.grid-container { 
  justify-content: space-around; 
  align-content: center; 
} 

✅ items는 셀 내부,
✅ content는 Grid 전체의 배치 기준이다.

---

🧩 10. place-items / place-content — 단축형 표현

.grid-container { 
  place-items: center;        /* justify-items + align-items */ 
  place-content: space-around; /* justify-content + align-content */ 
} 

💬 코드가 깔끔해지고 유지보수성이 높아진다.

---

🎨 11. 반응형 Grid 만들기

화면 크기에 따라 자동으로 열 개수가 조정되도록 만들 수 있다.

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
  gap: 16px; 
} 

✅ 화면이 줄어들면 열 개수가 자동으로 감소
✅ 남은 공간은 자동으로 채워짐

💡 카드형 UI나 쇼핑몰 목록에 필수.

---

🧮 12. Grid vs Flexbox — 언제 무엇을 써야 할까?

비교 항목 Flexbox Grid

정렬 방향	1차원 (가로 or 세로)	2차원 (가로+세로)
사용 목적	단일 줄 정렬, 버튼 그룹	전체 페이지 레이아웃
대표 속성	justify-content, align-items	grid-template, grid-area
반응형 구현	유연함	강력한 제어 가능
실무 예시	네비게이션, 버튼 줄	대시보드, 섹션 레이아웃

💬 요약:

• 작은 정렬 → Flexbox
• 전체 구조 → Grid

---

⚡ 13. 실무 예제 — 대시보드형 Grid 레이아웃

<div class="dashboard"> 
  <div class="box a">Header</div> 
  <div class="box b">Sidebar</div> 
  <div class="box c">Main</div> 
  <div class="box d">Widget</div> 
  <div class="box e">Footer</div> 
</div> 

.dashboard { 
  display: grid; 
  grid-template-areas: 
    "a a a" 
    "b c d" 
    "e e e"; 
  grid-template-columns: 200px 1fr 300px; 
  grid-template-rows: 80px 1fr 80px; 
  gap: 10px; 
} 
 
.box { background: #f4f4f4; border-radius: 8px; padding: 16px; } 
.a { grid-area: a; background: lightsteelblue; } 
.b { grid-area: b; } 
.c { grid-area: c; background: white; } 
.d { grid-area: d; background: #eee; } 
.e { grid-area: e; background: #ccc; } 

✅ 반응형 대시보드 구조 완성.
✅ 단 몇 줄의 코드로 복잡한 페이지 구성 가능.

---

🏁 14. 마무리 — “Grid는 레이아웃 설계의 종착점이다”

Flexbox가 정렬을 해결했다면,
Grid는 웹 전체의 구조를 설계하는 언어다.

💬 “디자이너처럼, 개발자답게 페이지를 배치하라.”

다음 편에서는
✅ 6. 반응형 웹 디자인(Responsive Design) 완벽 가이드 — 미디어쿼리부터 실전 예제까지
를 통해 Grid와 Flex를 활용한 모바일 대응 전략을 알아보자.

---