grid-column & grid-row 완전정복 – 셀 병합의 마법

 

 

Grid 레이아웃의 가장 강력한 기능 중 하나는
하나의 아이템이 여러 칸을 차지할 수 있다는 점이에요.

Flexbox에서는 어렵거나 비효율적이었던
“두 칸짜리 카드”, “헤더 전체 확장” 같은 걸
Grid에서는 grid-column과 grid-row로 아주 쉽게 만들 수 있어요!

---

 

✅ 기본 문법

.item {
  grid-column: 1 / 3;  /* 1번 선부터 3번 선 전까지 → 2칸 차지 */
}

 

속성	설명
grid-column	열 방향 병합
grid-row	행 방향 병합

 

---

 

🔁 단축 표기

grid-column: span 2;  /* 현재 위치에서 오른쪽 2칸 차지 */
grid-row: span 3;     /* 현재 위치에서 아래로 3칸 차지 */

 

→ 시작 지점 모를 때는 span으로만 간단하게!

---

 

🧪 실습 예시

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

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.header {
  grid-column: 1 / 3; /* 두 칸 병합 */
}

.footer {
  grid-column: span 2; /* 줄이름 생략하고 2칸 병합 */
}

 

---

 

🔧 응용 – grid-row로 세로 병합하기

.sidebar {
  grid-row: span 2;
}

 

→ 사이드바를 위에서 아래로 두 칸 차지하도록 설정
→ 대시보드, 관리자 페이지 등에 많이 쓰임

---

 

🧠 언제 써야 할까?

• 헤더를 전체 너비로 확장하고 싶을 때
• 카드나 배너가 다른 요소보다 더 넓거나 길어야 할 때
• 반응형 구조에서 특정 요소만 강조하고 싶을 때

---

 

❗ 주의할 점

• 병합된 칸은 다른 아이템과 겹치지 않도록 비워져 있어야 함
• 1 / -1은 첫 줄부터 끝 줄까지 확장할 때 유용해요!

.item {
  grid-column: 1 / -1; /* 전체 열 차지 */
}