使用grid-template-areas可直观定义页面布局。1. 设置Grid容器，通过字符串定义三行两列结构：header占首行，sidebar与main居中，footer在底部；2. 子元素用grid-area分配对应区域；3. 响应式下重排为单列并隐藏sidebar，提升移动端体验。命名需一致以确保正确渲染。
使用CSS Grid中的grid-template-areas可以非常直观地定义页面的主次区域布局。通过为不同区域命名，并在容器中以模板形式排列这些名称，能快速构建清晰的页面结构。
1. 定义Grid容器与区域划分
首先将父容器设置为Grid布局，并使用grid-template-areas指定各区块的位置。每个字符串代表一行，每个单词代表一个区域。
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 200px 1fr;
height: 100vh;
}
上述代码创建了一个三行两列的布局：顶部是页眉，中间左侧是侧边栏，右侧是主内容区，底部是页脚。
2. 为子元素分配区域
将子元素通过grid-area属性关联到对应名称，使其占据指定位置。
立即学习“前端免费学习笔记（深入）”；
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
HTML结构示例：
<div class="container"> <header class="header">Header</header> <aside class="sidebar">Sidebar</aside> <main class="main">Main Content</main> <footer class="footer">Footer</footer> </div>
3. 调整响应式布局
在小屏幕上可重新定义区域排布，隐藏次要区域或调整顺序。
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: 1fr;
}
.sidebar {
display: none;
}
}
这样在移动端就能隐藏侧边栏，只保留核心内容流，提升可读性。
基本上就这些。用grid-template-areas布局让结构一目了然，修改和维护都很方便。不复杂但容易忽略命名一致性，记得保持区域名与grid-area匹配。
