grid-template-areas 通过字符串定义语义化区域布局更直观易维护，需保证每行列数一致；响应式时应保持列数统一改顺序而非删减；注意 box-sizing、单位混用及 min-height: 100vh 必须设在网格容器上。
用 grid-template-areas 定义语义化区域布局
直接写结构比手动算行列线更直观，也更易维护。把页面拆成 header、sidebar、main、footer 四块，用字符串映射到 CSS 中即可：
.page-layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 250px 1fr 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
每个引号内是一行，空格分隔列，重复词表示跨列。注意：grid-template-areas 要求所有行的列数一致，否则声明无效。
子元素只需加 grid-area：
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
响应式切换时避免 grid-template-areas 断裂
在小屏下想改成单列堆叠，但直接重写 grid-template-areas 容易漏掉某一行，导致整个网格塌陷。正确做法是保持列数一致，只改排列顺序：
立即学习“前端免费学习笔记（深入）”；
- 错：写成
"header" "sidebar" "main" "footer"—— 这会变成 1 列 × 4 行，但原定义是 3 列，浏览器会静默忽略该规则 - 对：统一用 1 列，显式写出全部三列位置：
grid-template-areas: "header header header" "sidebar sidebar sidebar" "main main main" "footer footer footer" - 更稳妥：小屏下改用
grid-template-columns: 1fr+grid-row显式控制顺序，绕过grid-template-areas的语法约束
grid-template-columns 中 fr 和固定值混用的陷阱
侧栏设为 250px、内容区用 1fr 看似合理，但若内容区有 padding 或 border，默认 box-sizing 是 content-box，会导致实际宽度溢出容器。
必须同步处理：
- 给
.page-layout加box-sizing: border-box - 或确保所有子项（尤其是
.main）也设box-sizing: border-box - 避免在
grid-template-columns里混用px和%，比如250px 70%—— 百分比参照的是容器宽，而px是绝对值，两者计算逻辑冲突，结果不可控
底部永远贴底时，1fr 不等于“剩余全部高度”
很多人以为 grid-template-rows: auto 1fr auto 就能让 main 填满中间空白，但前提是容器本身有明确高度。如果父容器（比如 body）没设 min-height: 100vh，1fr 就没参考基准，会收缩到内容高度。
关键点：
-
min-height: 100vh必须加在网格容器上，不是html或body（除非你确认它们已撑满视口） - 不要依赖
height: 100%向上继承，它在 flex/grid 容器中行为不稳定 - 如果页面内容超长，
1fr会随内容扩展，不会强制截断 —— 这是优点，但若要滚动局部区域（比如只让main滚动），得额外加overflow-y: auto并限制其最大高度
