grid-template-areas와 반응형 grid는 어떻게 동작하나요?

Question

Accepted Answer

`grid-template-areas`는 영역에 이름을 붙여 grid를 **시각적으로** 배치하게 해주어, 복잡한 페이지 레이아웃을 읽기 쉽고 반응형으로 재배치하기 쉽게 만듭니다.

## 이름 붙인 영역 정의하기

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* 1행: header가 두 열에 걸침 */
    "sidebar main"     /* 2행: sidebar | main */
    "footer  footer";  /* 3행: footer가 두 열에 걸침 */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* 각 요소를 이름 붙인 영역에 할당 */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

ASCII 아트 형태의 `grid-template-areas`가 *곧* 레이아웃입니다 — 구조를 한눈에 볼 수 있고, 이름을 반복하면 영역이 여러 셀에 걸치게 됩니다.

## 모바일을 위한 재배치 — 그냥 지도를 다시 그리기

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* 단일 열 */
    grid-template-areas:
      "header"
      "main"      /* 모바일에서 main이 이제 sidebar 위에 */
      "sidebar"
      "footer";
  }
}
```

모바일을 위해 전체 레이아웃을 바꾸려면, 영역 지도만 다시 쓰면 됩니다 — HTML과 `grid-area` 할당은 그대로 유지됩니다. 이는 각 요소를 개별적으로 재배치하는 것보다 훨씬 깔끔합니다.

## 이것이 강력한 이유

- **자기 문서화** — CSS가 렌더링된 레이아웃을 시각적으로 반영합니다.
- **소스 순서와 분리** — HTML 순서와 무관하게 요소를 어디든 배치할 수 있습니다(접근성을 위해 DOM에서 `main`을 먼저 두면서도 시각적으로는 sidebar를 먼저 표시 가능).
- **쉬운 반응형 재배치** — breakpoint마다 영역 템플릿만 교체하면 됩니다.

## 왜 중요한가

이름 붙인 grid 영역은 페이지 레벨 레이아웃(header/sidebar/main/footer)을 읽기 쉽고 손쉽게 반응형으로 만듭니다 — 재구성이 위치를 다시 배선하는 게 아니라 ASCII 지도를 편집하는 문제입니다.

이는 CSS가 제공하는 가장 명확하고 유지보수하기 좋은 레이아웃 기법 중 하나입니다.