Grid lines and template areas

그리드 레이아웃의 핵심은 **"격자판을 어떻게 나누고, 그 안의 영역을 어떻게 이름 붙여 관리하느냐"**에 있습니다.

단순히 칸을 나누는 수준을 넘어, **그리드 라인(Grid Line)**과 **템플릿 영역(Grid Template Areas)**을 이해하면 복잡한 잡지 스타일의 레이아웃도 아주 직관적으로 설계할 수 있습니다.

---

1. 그리드 라인 (Grid Lines)

그리드 라인은 그리드 열과 행을 구분하는 눈에 보이지 않는 '선'입니다.

• 번호 체계: 라인 번호는 항상 1부터 시작합니다. 3열짜리 그리드라면 세로 라인은 1번부터 4번까지 존재합니다.
• 음수 번호: 끝에서부터 거꾸로 셀 수도 있습니다. 마지막 선은 항상 -1입니다.
• 활용: grid-column과 grid-row 속성을 사용해 특정 아이템이 몇 번 선부터 몇 번 선까지 차지할지 결정합니다.

---

2. 그리드 템플릿 영역 (Grid Template Areas)

라인 번호를 일일이 계산하는 것이 번거롭다면, 각 영역에 직관적인 이름을 붙여 배치할 수 있습니다.

• 작성 방식: 부모 요소에서 grid-template-areas를 사용해 마치 바둑판을 그리듯 큰따옴표 안에 영역 이름을 배치합니다.
• 빈칸 처리: 마침표(.)를 사용하면 그 칸은 빈 공간으로 남겨둡니다.
• 연결: 자식 요소에서 grid-area: 이름;을 선언하면 해당 자리가 해당 요소로 채워집니다.

---

🖥️ 실전 예제 코드: "라인 vs 영역 비교"

두 방식의 차이를 코드로 확인해 보겠습니다.

HTML

 

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 80px 300px 60px;
    gap: 10px;
    /* 템플릿 영역 정의 */
    grid-template-areas: 
      "head head head"
      "side main ."
      "foot foot foot";
  }
 
  /* 1. 라인 번호 방식 */
  .header {
    /* 1번 라인부터 4번 라인(끝)까지 차지 */
    grid-column: 1 / 4; 
    background: #34495e;
  }
 
  /* 2. 템플릿 영역 방식 */
  .sidebar { 
    grid-area: side; 
    background: #e67e22; 
  }
 
  .content { 
    grid-area: main; 
    background: #ecf0f1; 
  }
 
  .footer { 
    grid-area: foot; 
    background: #2ecc71; 
  }
</style>
 
<div class="container">
  <div class="header">Header (Line 방식)</div>
  <div class="sidebar">Sidebar (Area 방식)</div>
  <div class="content">Main Content (Area 방식)</div>
  <div class="footer">Footer (Area 방식)</div>
</div>

---

📋 주요 속성 및 팁 요약

속성	설명	팁
grid-column	시작선 / 끝선 번호	1 / -1은 처음부터 끝까지 전체를 차지할 때 씀
grid-row	시작행 / 끝행 번호	span 2는 현재 위치에서 2칸을 차지하라는 뜻
grid-template-areas	영역 이름을 바둑판식으로 배치	코드 가독성이 가장 좋으며 반응형 작업 시 이름만 재배치하면 됨
grid-area	자식에게 부여할 영역 이름	grid-template-areas에서 정한 이름과 일치해야 함

---

학습 정리

• 그리드 라인은 미세하고 정교한 배치가 필요할 때 강력합니다.
• 템플릿 영역은 전체적인 레이아웃의 구조를 한눈에 파악하고 싶을 때 유용합니다.
• 실무에서는 반응형 웹을 만들 때, 모바일에서는 영역을 한 줄로("head" "main" "side" "foot") 세우고 데스크톱에서만 넓게 펼치는 방식을 선호합니다.

---

그리드의 설계도를 그리는 두 가지 핵심 기법을 정복하셨습니다!

---