grid-template-areas 和响应式网格如何工作？

Question

Accepted Answer

`grid-template-areas` 让您通过命名区域以**可视化**方式布局网格，使复杂的页面布局易于理解和快速响应式重排。

## 定义命名区域

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

ASCII-art `grid-template-areas` **就是**布局本身 — 你一眼就能看出结构，而重复一个名称会使一个区域跨越多个单元格。

## 移动端重排 — 只需重新绘制地图

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

要改变整个移动端布局，你只需重写区域地图 — HTML 和 `grid-area` 分配保持完全一致。这比逐个重新定位每个元素要干净得多。

## 为什么这很强大

- **自我注释** — CSS 在视觉上镜像了渲染后的布局。
- **与源顺序解耦** — 元素可以放在任何地方，不受 HTML 顺序限制（有利于在 DOM 中优先放置 `main` 以获得可访问性，同时在视觉上优先显示侧栏）。
- **轻松响应式回流** — 在每个断点处交换区域模板。

## 为什么这很重要

命名网格区域使页面级布局（header/sidebar/main/footer）既易读又容易响应式 — 重构只需编辑 ASCII 地图，而不需要重新调整位置。

这是 CSS 提供的最清晰、最易维护的布局技术之一。