CSS Grid 命名区域实战：让页面布局在移动端与桌面端复用同一套模板

为什么用命名区域

写响应式布局时，常见做法是用 Flexbox 配合 order 属性在断点处重排元素顺序。元素一多，order 数字会变得难以维护，也看不出布局意图。

CSS Grid 的 grid-template-areas 允许你用「画图」的方式描述布局：给每个格子起名字，直接写出页面结构。切换断点时，只要重新画一张图，HTML 结构完全不用动。

最小示例

<div class="layout">
  <header class="header">头部</header>
  <aside class="sidebar">侧栏</aside>
  <main class="content">正文</main>
  <footer class="footer">页脚</footer>
</div>

.layout {
  display: grid;
  gap: 12px;
  /* 移动端：单列堆叠 */
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

关键点：grid-area 的值要和 grid-template-areas 里的名字一致，拼写错误会导致该元素不参与布局。

桌面端换一张「图」

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 220px 1fr;
    grid-template-areas:
      "header  header"
      "sidebar content"
      "footer  footer";
  }
}

HTML 一行没改，元素位置从纵向堆叠变成了两栏布局，侧栏还挪到了正文左侧。这是命名区域相比 order 最直观的收益。

三个容易踩的坑

1. 区域必须是矩形

grid-template-areas 里同名区域必须构成一个矩形，否则整条声明失效。下面这种「L 形」是不合法的：

"header header"
"sidebar header"   /* header 变成 L 形，无效 */

2. 用点号占位

不需要放内容的格子用 . 表示，一行里连续多个点等价于一个空格：

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

3. 行数与列数要对齐

每一行的字符串里，名字个数必须相同，否则声明同样会被忽略。列数由字符串里的名字个数决定，行数由字符串的行数决定，不需要额外写 grid-template-rows / grid-template-columns（除非要控制尺寸）。

什么时候不适合用

• 元素数量动态变化（比如列表项由数据渲染）：命名区域是写死的，动态项用 grid-auto-flow 或 Flexbox 更合适。
• 需要精细控制重叠：命名区域每个格子只能放一个区域，重叠定位要用 grid-row / grid-column 显式指定。

小结

命名区域的核心价值是「布局即文档」：读 CSS 就能看懂页面结构，改断点只是重画一张图。对于头部、侧栏、正文、页脚这类结构稳定的页面骨架，它比 order 方案更易读也更好维护。落地时先确认区域是矩形、行列对齐，再逐步加断点即可。

兼容性方面，grid-template-areas 属于 CSS Grid Level 1 规范，主流现代浏览器均已支持，使用前可按项目要求查阅 Can I use 确认。