在构建后台管理系统或内容站时，页面通常被划分为头部、导航、主体与底部等区块。CSS Grid提供的grid-template-areas能将这些区块命名为语义化的区域，再通过字符串矩阵描述它们在网格中的排布，从而让布局代码具备极高的可读性。
一、grid-template-areas基础语法
grid-template-areas的值是由字符串组成的列表，每一行字符串代表网格的一行，字符串中用空格分隔的每一个名称代表一个网格列。相同名称在相邻行和列中连续出现，就合并为一个矩形区域。子元素通过grid-area: 区域名放入对应位置。
下面的例子定义了一个两行三列的容器，第一行全给header，第二行分为sidebar、main和extra。注意每行包含的列数必须一致，否则浏览器会忽略整条声明。
.container {
display: grid;
grid-template-columns: 200px 1fr 150px;
grid-template-rows: 60px 1fr;
grid-template-areas:
"header header header"
"sidebar main extra";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.extra { grid-area: extra; }
上述写法把布局意图直接写在CSS里，比起用grid-column: 1 / 3这类线编号，维护时不容易数错。如果后期要把extra移到下方，只需改字符串矩阵，不用动子项代码。
需要强调的是，命名区域必须是矩形。比如想拼出一个L形区域，用不连续的同名格子是不允许的，浏览器会认为模板无效。遇到不规则设计，建议拆成多个矩形区域再叠加间隙处理。
二、使用点号表示空白单元
当某些网格位置不需要放内容时，可以用一个点号.或一个多个连续点. .来占位。这样能实现错落布局而不破坏矩形规则。
例如我们让头部只占左侧两列，右侧顶部空出放工具条，就可以写成如下结构。空白单元不参与区域命名，也不会被任何grid-area引用。
.layout {
display: grid;
grid-template-columns: 120px 1fr 100px;
grid-template-rows: 50px 400px;
grid-template-areas:
"head head ."
"nav body tool";
}
这里第三列第一行是点号，表示那个格子留空。实际项目中常利用这种方式在视觉上制造不对称排版，同时保证底层网格依旧规整。
点号占位和具名区域可以混用，但每行令牌数量仍需等于列数。若用多个点连写，如...，它仍被视为单个空单元，不会因为字符多就占多列。
三、响应式重排实战
grid-template-areas在响应式场景下优势明显。只需在不同断点下重写area矩阵，就能让同一套HTML在桌面端和移动端呈现完全不同的排布，而不必借助float或绝对定位 hack。
以下代码展示桌面端三栏、移动端单栏堆叠的切换。移动端把所有区域写成一列，自然形成上下滚动流。这种改法比调整多个margin直观太多。
.wrap {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"top top top"
"left center right"
"bottom bottom bottom";
}
@media (max-width: 768px) {
.wrap {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
"top"
"left"
"center"
"right"
"bottom";
}
}
在桌面模板里，top横跨三列，bottom同样横跨三列，中间三栏并排。到了窄屏，容器只有一列，区域名按顺序竖排，侧边栏和右侧栏不再左右挤压主体，而是依次出现。
这种方案让结构和样式解耦：HTML里四个区块的顺序无需改动，所有重排逻辑收敛在CSS的area字符串中。团队复盘布局时，扫一眼字符串矩阵便知当前断点下页面长什么样。
四、常见误区与调试建议
初学者常以为区域名可以重复出现在不相邻位置形成两个独立块，实际上同名只能连成一块矩形。若真要两个header视觉块，应起不同名字如header-a与header-b。
另一个易错点是在grid-template-areas里使用了未加引号的多个单词，或拼错子项的grid-area值。区域名只能是自定义标识，不能含空格，拼错会导致子项脱离网格流，退化为自动放置。
<div class="box"> <header class="header">站点头部</header> <nav class="sidebar">侧边</nav> <main class="main">内容区</main> <footer class="extra">底部</footer> </div>
上面这段HTML配合前文CSS即可工作。调试时建议先给每个区域加明显背景色，确认矩形边界是否符合预期。如果整页布局消失，优先检查area矩阵行令牌数是否等于列数，以及是否有非矩形同名区域。
总体来看，grid-template-areas用接近草图的语法降低了网格布局心智负担。只要守住矩形规则和行列数一致这两条线，就能在各类后台与营销页中快速搭建易读易改的版式。
CSS_Gridgrid-template-areas网页布局修改时间：2026-08-07 19:00:34