必须同时满足父容器有可测量高度、显式定义三行模板（如auto 1fr auto）、页脚不脱离文档流；grid-row: span -1无效因规范只接受正整数，真正锚定底部需用grid-row-end: -1配合显式模板。
能，但必须同时满足三个条件：父容器有可测量高度、显式定义三行模板、页脚不脱离文档流。单独写 grid-row: span -1 或 align-self: end 都无效——这不是写法不对，而是 Grid 的分配逻辑根本没启动。
为什么 grid-row: span -1 一点用都没有
CSS Grid 规范只接受正整数作为 span 的值。grid-row: span -1 会被浏览器静默忽略，不报错也不生效。你看到页脚没动，不是它“没执行”，而是压根没被解析。
-
grid-row: 2 / span 2合法：从第 2 条网格线开始，向下占 2 行轨道 -
grid-row: span -1非法：直接丢弃，等价于没写这行 - 真正能锚定底部的是负索引终点，比如
grid-row-end: -1，但它依赖显式的grid-template-rows
grid-template-rows: auto 1fr auto 为什么必须写全三段
这行声明把语义固定为「头部自适应 → 主体吃剩余 → 底部自适应」。1fr 不是魔法，它只在有明确剩余空间时才起作用；而这个“剩余”是由前后两个 auto 行共同界定的。
- 漏掉第一个
auto（比如写成1fr auto），页眉会塌进主体区，破坏结构顺序 - 漏掉最后一个
auto（比如写成auto 1fr），页脚就没了独立轨道，可能被拉伸或挤出视口 - 写成
auto 1fr 60px可以，但页脚就不再是“自适应高度”，而是固定 60px —— 这没问题，只是要清楚取舍
为什么页脚还是悬在半空？检查这三处高度约束
1fr 分配失败，90% 是因为某一层容器高度不可测。Grid 不会凭空造高度，它只按已有空间切分。
-
html和body都得设min-height: 100vh（推荐）或height: 100%；只设一个没用 - 网格容器（通常是
body）必须设display: grid+min-height: 100vh；仅靠继承不够稳定 - 避免给
body加默认margin，也别在主内容区或页脚里写height: 100%—— 这会干扰auto行的自然计算
页脚内容变多后撑开、贴不住底了怎么办
这不是 1fr 失效，而是页脚自身高度失控。Grid 把它当 auto 处理，它就真按内容长高，把底部顶下去了。
- 如果页脚需滚动，加
max-height: 200px+overflow-y: auto，内部自己滚 - 避免对页脚设
height或min-height，否则会压制auto行的弹性行为 - 真要固定高度（如版权栏），就用
grid-template-rows: auto 1fr 60px，但记得同步删掉页脚里所有可能撑高的样式
最常被跳过的点：所有基于 1fr 的垂直分配，都依赖父容器高度可测量。没有 min-height 或视口单位兜底，1fr 就只是个空名号——它不会帮你撑高容器，只会安静地分一块不存在的空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
