用 grid-template-areas 可视化定义 header/main/aside/footer 布局，需容器设 display: grid、子元素正确声明 grid-area；main 自适应滚动需 minmax(0, 1fr) + min-height: 0 + overflow-y: auto；响应式通过媒体查询切换完整模板并同步调整列数；失效主因是容器未设 grid、子元素缺 grid-area 或混用 float/absolute。
grid布局中如何定义网页整体结构（header/main/aside/footer）
用 grid-template-areas 最直观——它允许你用字符串“画”出区域分布，比纯行列编号更易读、易维护。
常见错误是把 grid-area 写错位置（比如漏在子元素上），或字符串行数不一致导致解析失败。
- 必须为容器（如
body或.layout）设置display: grid - 每个区域名需在
grid-template-areas中完整拼成矩形块，空格分隔列，换行分隔行 - 子元素用
grid-area: "header"匹配对应名称，名称必须完全一致（含引号）
body {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-rows: 80px 1fr 60px;
grid-template-columns: 200px 1fr 300px;
}
如何让main区域自适应宽度并支持滚动而不撑开页面
关键不是靠 overflow 硬截，而是用 minmax(0, 1fr) 或 1fr 配合 min-height: 0 断开隐式高度继承链。
否则当 main 内容超长时，grid 容器会优先扩展自身高度，而不是让 main 滚动。
立即学习“前端免费学习笔记（深入）”；
