grid-row: span -1 无效，因规范只接受正整数；真正锚定底部需用 grid-row-end: -1 配合显式 grid-template-rows；最稳方案是 grid-template-rows: auto 1fr auto 并设容器 min-height: 100vh。
底栏永远在页面最下方，靠 1fr 就够了，但必须配合显式行定义和容器高度约束；单独写 align-self: end 或 justify-self: end 完全无效。
为什么 grid-row: span -1 不起作用
很多人试过 grid-row: span -1 想让页脚“向上跨到最底”，但 CSS Grid 规范明确要求 span 后只能跟正整数。浏览器会直接忽略这个声明，不报错也不生效。
-
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 是关键——它只在有明确可用空间时才生效。
- 父容器必须设高度，比如
height: 100vh或通过祖先链继承height: 100% - 不要省略
auto：写成1fr auto会让页脚挤到主体下面，失去“永远在最下方”的效果 - 如果内容极少，
main区域可能塌缩，可改用minmax(min-content, 1fr)防止
页脚内容溢出时怎么处理
当页脚本身内容变多（比如多行文字、图标、链接），它会撑高，破坏“贴底”效果。这不是 1fr 的问题，而是没控制好页脚自身尺寸。
- 给页脚加
max-height+overflow-y: auto，让它内部滚动 - 避免对页脚设
height或min-height，否则会干扰auto行的自然计算 - 若页脚需固定高度（如 60px），就改用
grid-template-rows: auto 1fr 60px，但此时它就不是“自适应高度”了
真正容易被忽略的点是：所有基于 1fr 的垂直分配，都建立在「父容器高度可测量」的前提下。没有 height、min-height 或视口单位兜底，1fr 就只是个空名号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
