网格命名区域属性

最后更新：2026-09-13

grid-template-areas 网格命名区域属性

grid-template-areas 允许你通过命名区域来直观地定义网格布局结构。每个字符串代表一行，字符串中的每个标识符代表一个单元格所属的区域，相同名称的相邻单元格会自动合并为一个区域。它让网格布局的可读性大幅提升，特别适合整页布局设计。

分类
初始值	none
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

grid-template-areas: none | <string>+;

⚙️ 取值

值	类型	描述
`none`	关键字	无命名区域
`<string>`	类型	区域名称定义

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
grid-template-areas	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： 区域名称在视觉上按行列对齐书写，可以直观看到页面结构，是 grid-template-areas 的一大优势。

注意： 每个字符串中的列数必须与网格列数一致，且每个区域必须是矩形，不能出现 L 形或不规则形状。

❓ 常见问题

Qgrid-template-areas 中的区域名有什么规则？

A区域名必须是合法 CSS 标识符：不能以数字开头、不能含空格、不能含特殊符号（连字符和下划线除外），也不能用 auto、span 等全局关键字。每个字符串代表网格的一行，字符串内相同名称的相邻单元格会自动合并为一个区域，且该区域必须是矩形，不能是 L 形或不连通形状。

Q如何让某个单元格保持空白？

A用连续的句点（.）表示空白单元格，一个或多个均可，例如 "header . ." 表示第二、三列为空。每行字符串的长度（单元格数量）必须一致，空白占位同样计入列数。想留白的单元格写 . 即可，多个 . 仅用于可读性，没有额外语义。

Q如何用 grid-template-areas 实现响应式布局？

A把区域划分交给 CSS：桌面端模板 "header header" / "sidebar main"，移动端媒体查询只换模板 "header" / "main" / "sidebar"，子项仍用 grid-area 引用区域名，DOM 不用动。这是 grid-template-areas 的核心价值：布局与结构解耦。