[CSS] Grid - 레이아웃을 이름으로 설계 정리

1. grid-template-areas란?

 

grid-template-areas는
Grid 영역에 “이름”을 붙여 레이아웃을 설계하는 방식입니다.

 

숫자(grid-line)를 세지 않고도
시각적으로 구조를 한눈에 파악할 수 있는 게 가장 큰 장점입니다.

 

2. 기본 사용법

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "header header"
    "sidebar content";
}

문자열 한 줄 = Grid의 한 행(row)
같은 이름이 반복되면 하나의 영역으로 병합

 

3. 각 영역은 grid-area로 연결

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

이렇게 하면 HTML 순서와 무관하게 레이아웃이 배치됩니다.

 

4. 빈 칸은 .으로 표현

grid-template-areas:
  "header header"
  ".      content";

• . 은 빈 공간
• 해당 칸에는 어떤 요소도 배치되지 않음

 여백 설계할 때 유용

 

 

5. 정리하면

• grid-template-areas = 이름 기반 Grid 배치
• 숫자(line) 대신 의미 있는 구조로 레이아웃 작성
• 반응형 레이아웃에 특히 강력

 

grid-template-areas는 Grid를 ‘좌표’가 아니라 ‘지도’처럼 쓰게 해준다.”