grid-area & template-areas 완전정복 – 코드로 레이아웃 구조를 그려보자!

 

 

CSS Grid의 진짜 매력은
HTML 요소의 순서와 관계없이,
디자인 구조를 CSS 코드만으로 배치할 수 있다는 점이에요.

특히 grid-area와 grid-template-areas를 쓰면
코드로 마치 도면 그리듯 레이아웃을 설계할 수 있어요.

이번 포스팅에서는 바로 그 기능을 실습 예제와 함께 보겠습니다!

---

 

✅ 기본 구성 예시

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

 

---

 

🎨 CSS 스타일 구성

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

header   { grid-area: header; background: #ffa07a; }
aside    { grid-area: sidebar; background: #f0e68c; }
main     { grid-area: main; background: #e0ffff; }
footer   { grid-area: footer; background: #ffb6c1; }

 

---

 

🧩 주요 속성 설명

속성	기능
grid-template-areas	레이아웃을 코드로 그리듯 구역을 나눔
grid-area	해당 요소가 어느 영역에 들어갈지 지정

각 요소는 grid-area 속성을 통해
CSS에 지정된 이름의 위치로 정확히 배치됩니다.

---

 

🧠 팁! 코드만 봐도 구조가 보이는 마법

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

 

이걸 보면 한눈에

• 위쪽엔 header
• 좌측엔 sidebar
• 우측엔 main
• 아래엔 footer

이렇게 3행 2열 구조라는 게 눈에 들어오죠?

---

 

❗주의할 점

• 이름은 반드시 문자열(" " 안에 작성)
• 각 줄의 컬럼 개수는 반드시 같아야 함
• grid-area로 지정하지 않으면 해당 이름은 무시됨

---

 

📦 실전에서 어디에 쓰면 좋을까?

• 블로그/관리자 페이지 등 좌측 메뉴 + 본문 + 푸터 구조
• Landing page나 대시보드 같은 고정 레이아웃
• 순서를 바꾸지 않고 시맨틱 구조 유지하면서 디자인