通过 grid-template-areas 与 media query 结合，可实现响应式布局：先定义 header、sidebar、main、footer 的网格区域结构，再在小屏下调整为单列堆叠顺序，提升移动端体验。
使用 css grid-template-areas 配合 media query 可以轻松实现清晰且自适应的网页布局。通过为不同屏幕尺寸重新定义网格区域的排列方式，页面能在手机、平板和桌面设备上都保持良好的可读性和用户体验。
1. 定义基础布局结构
先用 grid-template-areas 为页面划分逻辑区域。每个区域用一个名称表示，整个布局通过字符串直观呈现。
例如，一个典型页面包含头部、侧边栏、主内容区和页脚：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
gap: 10px;
}
其中：
立即学习“前端免费学习笔记（深入）”；
- header 横跨两列
- sidebar 在左侧，宽度固定
- main 是主要内容区，占据剩余空间
- footer 也在底部横跨整行
2. 使用 media query 调整小屏布局
当屏幕变窄（如手机）时，可通过媒体查询修改 grid-template-areas 的结构，使内容垂直堆叠更合理。
@media (max-width: 600px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto;
}
}
这时：
- 所有区域变为单列排列
- 主内容在侧边栏之前，更适合移动端阅读习惯
- 列宽改为 1fr，充分利用屏幕宽度
3. 组件对应区域命名
确保 HTML 元素与 grid area 名称一致：
<div class="container"> <header style="grid-area: header;">Header</header> <aside style="grid-area: sidebar;">Sidebar</aside> <main style="grid-area: main;">Main Content</main> <footer style="grid-area: footer;">Footer</footer> </div>
也可以写成类或单独的 CSS 规则，关键是 grid-area 值必须与模板中名称匹配。
4. 实际适配建议
在真实项目中，可以设置多个断点来优化不同设备体验：
- 桌面端：三栏或侧边栏+主内容并排
- 平板：主内容优先，侧边栏下移或隐藏
- 手机：全部垂直排列，简化导航
还可以配合 minmax() 或 auto-fit 增强弹性，比如让某些区域在空间充足时自动扩展。
基本上就这些。通过改变 grid-template-areas 的字符串结构，并结合媒体查询，就能用极少的代码实现高度可控的响应式布局，语义清晰，维护方便。
