页脚贴底需三要素：min-height: 100vh 加在 grid 容器（如 .app-wrapper）、body { margin: 0 }、grid-template-rows 使用 minmax(0, 1fr)；auto 行高适配动态内容，避免内部强行撑高。
直接用 grid-template-rows: auto 1fr auto 就能实现，但必须配齐三处高度约束，缺一不可——否则页脚大概率悬在半空。
为什么页脚总不贴底？min-height: 100vh 没加对地方
Grid 的 1fr 只按父容器的可用高度分配。如果包裹容器（比如 .app-wrapper）本身高度是 auto，那 1fr 分到的就是内容实际高度，不是视口高度。
-
html和body不需要设height: 100%，现代做法直接跳过它们 - 把
min-height: 100vh加在你的 Grid 容器上（如.app-wrapper），这是唯一必须的位置 - 同时确保
body { margin: 0 }，否则默认外边距会撑开容器，导致100vh计算偏移
grid-template-rows 里写 1fr 还是 minmax(0, 1fr)？
优先用 minmax(0, 1fr)。单纯 1fr 在某些场景下会被子元素的 min-height 或 padding 撑高，导致内容区溢出或页脚错位。
-
minmax(0, 1fr)表示“最小为 0，最大占满剩余空间”，更鲁棒 - 页头、页脚行统一用
auto，别写死像素值（除非你确定高度永远不变） - 避免混用单位，例如
64px 1fr 80px—— 一旦页头/页脚高度动态变化，布局就断了
用 grid-template-areas 布局时，字符串对齐和命名容易出错
grid-template-areas 是纯字符串匹配，空格、换行、大小写全敏感。复制粘贴后末尾多一个空格，整个区域就失效。
- 写法必须严格对齐，比如：
"header header" "main main" "footer footer"（两列结构） - 所有区域名统一小写，
grid-area: footer必须和grid-template-areas里的"footer"完全一致 - 页头页脚要横跨全部列，别漏写重复区域名；侧边栏存在时，
grid-template-columns只定义两列（如240px 1fr），不要硬塞三列
最常被忽略的是：页脚内部如果用了 display: flex 或设置了 height: 100%，会干扰 auto 行高的自然计算——让它保持自然流式高度，靠 Grid 外层控制位置，而不是在里面强行撑高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
