grid-template-areas通过命名区域直观定义网格布局，使用字符串划分行与列，结合grid-area将元素分配至对应区域，实现清晰的模块化页面结构。
使用 CSS Grid 中的 grid-template-areas 可以非常直观地构建网页首页的模块化布局。它允许你通过命名区域的方式，像画布一样“绘制”页面结构，代码清晰、易读、易维护。
什么是 grid-template-areas？
grid-template-areas 是 CSS Grid 布局中的一个属性，用于定义网格容器中各个子元素所占据的命名区域。你可以用字符串来“画出”布局结构，每个字符串代表一行，每个单词代表一个网格单元格。
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-rows: 80px 1fr 60px;
grid-template-columns: 200px 1fr 1fr;
}
上面的代码将页面分为三行三列，并命名了三个区域：header、sidebar、main 和 footer（header 和 footer 横跨三列）。
如何为子元素分配区域？
使用 grid-area 属性将子元素与 grid-template-areas 中定义的名称对应起来。
立即学习“前端免费学习笔记（深入）”；
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
这样，每个元素就会自动放置到指定的网格区域中，无需关心具体行列位置。
实际首页布局示例
以下是一个典型的首页结构，包含头部、侧边栏、主内容区、广告位和页脚：
<div class="homepage"> <header class="header">Header</header> <aside class="sidebar">Sidebar</aside> <main class="main">Main Content</main> <aside class="ad">Advertisement</aside> <footer class="footer">Footer</footer> </div>
.homepage {
display: grid;
grid-template-areas:
"header header header"
"sidebar main ad"
"footer footer footer";
grid-template-rows: 80px 1fr 60px;
grid-template-columns: 200px 1fr 200px;
height: 100vh;
gap: 10px;
padding: 10px;
}
.header { grid-area: header; background: #4CAF50; color: white; }
.sidebar { grid-area: sidebar; background: #ddd; }
.main { grid-area: main; background: #fff; }
.ad { grid-area: ad; background: #ffeb3b; }
.footer { grid-area: footer; background: #333; color: white; }
这个布局清晰表达了各模块的位置关系，修改时只需调整字符串即可快速重构页面结构。
使用技巧与注意事项
- 每行字符串中的单词数量必须一致，对应列数
- 使用点号
.表示空的网格单元格 - 同一个区域名称必须是连续的矩形块，不能断开
- 命名建议使用语义化名称，如
header、nav、banner等 - 在响应式设计中，可通过媒体查询重新定义
grid-template-areas
基本上就这些。用 grid-template-areas 做首页布局，就像在纸上画草图一样自然，特别适合模块化页面设计。不复杂但容易忽略的是命名一致性与结构对齐。
