讲解

grid-template-areas 让布局变成「所见即所得的 ASCII 图」：在容器上用字符串画出每个区域的位置和形状，给子元素用 grid-area: 区域名 对号入座。同样的名字连续出现表示该区域跨多格（必须组成矩形），点号 . 表示留空。页面级布局——头部、侧栏、主区、底栏——用这个语法写出来，结构一目了然，新人接手代码也能秒懂。

它最大的威力在响应式重排：媒体查询里只需重写容器的 ASCII 图，子元素的 grid-area 一行不动，布局就从「桌面三栏」变成「移动单栏」。对比用 Flexbox 做同样的事要调整 order、宽度、换行一堆属性，grid-areas 的维护成本低一个量级。

配套知识有两个。一是命名网格线：grid-template-columns: [sidebar-start] 240px [sidebar-end main-start] 1fr [main-end]，之后可以 grid-column: sidebar-start / main-end 按名字定位——areas 本质上是它的语法糖。二是区域对齐：子元素在区域内可以用 justify-self/align-self 单独对齐，区域默认拉伸填满。注意命名区域生成的隐式线名（区域名-start/end）也可直接使用，和显式命名不冲突。

示例

/* 桌面：经典页面骨架 */
.page {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 16px;
}
.page header {
  grid-area: header;
}
.page aside {
  grid-area: sidebar;
}
.page main {
  grid-area: main;
}
.page footer {
  grid-area: footer;
}

/* 移动端：只改 ASCII 图，子元素不动 */
@media (max-width: 768px) {
  .page {
    grid-template-areas:
      'header'
      'main'
      'sidebar'
      'footer';
    grid-template-columns: 1fr;
  }
}

/* 留空与跨格 */
.mosaic {
  display: grid;
  grid-template-areas:
    'hero hero side'
    'hero hero side'
    '.    foot foot';
  grid-template-columns: 1fr 1fr 200px;
}

常见坑

  • 区域不是矩形：'a a b' / 'a b b' 这样 L 形区域直接让整个属性失效。每个名字占据的格子必须组成矩形。
  • 每行字符串列数不一致：第一行三个名字、第二行两个，属性同样失效。画完图数一数列。
  • 忘记给子元素分配区域：没写 grid-area 的子元素会被自动放置到图外的隐式轨道，布局看似「多出一列/一行」。要么全部对号入座，要么明确接受自动放置。
  • 改图不改轨道尺寸：重排 areas 后记得同步调整 grid-template-columns/rows，行列数变了模板没跟上，尺寸全错。
  • 区域名与 HTML 类名混淆：grid-area: header 里的 header 是「区域名」，不是选择器，不要求子元素类名一致（但保持一致更易读）。

小结

grid-template-areas 用 ASCII 图描述布局，子元素按名入座；响应式重排只需改图；区域必须矩形、每行列数一致。下一章系统学习响应式：媒体查询。