grid-row: span -1 无效，规范只接受正整数；真正实现底部锚定需用 grid-row-end: -1 配合显式 grid-template-rows；span 仅在 grid-row-start 或 end 中配合行号使用，如 2 / span 2；最稳定撑满方案是 grid-template-rows: auto 1fr auto。
grid-row: span 1 和 grid-row: span -1 的行为差异
很多人以为 span 后面加负数就能“向上跨行”，但 CSS Grid 规范里 grid-row 的 span **只接受正整数**。写 grid-row: span -1 会被浏览器直接忽略，不报错也不生效。真正能实现“从底部反向占位”的，是靠 grid-row-start / grid-row-end 配合 span 关键字的隐式定位逻辑。
用 grid-row-end: -1 实现底部锚定
Grid 行号从 1 开始计数，而负数行号表示从显式网格末尾倒数：-1 指最后一行线（即最底边界），-2 是倒数第二行线。要让一个元素“撑满到底部”，关键是让它从某一行开始、结束于 -1：
.footer {
grid-row-start: 3;
grid-row-end: -1;
}这表示：从第 3 行线开始，一直延伸到显式网格的最后一行线。前提是容器设置了 grid-template-rows（比如 1fr 1fr），否则隐式网格不会生成足够多的行线供 -1 引用。
- 如果容器没定义
grid-template-rows，-1会指向隐式网格的第一行线（即等效于 1），导致元素高度为 0 - 若内容区域用了
grid-row: 1 / -1，它会和 footer 冲突——必须确保其他项没占用同一行范围 - 推荐显式声明最小行数：
grid-template-rows: auto 1fr，再让主内容设grid-row: 2 / -1，footer 设grid-row: -1 / -1（单行线占位）
span 关键字在 grid-row 中的真实作用场景
span 在 grid-row 里不是独立属性，必须配合行号或命名线使用，例如：
立即学习“前端免费学习笔记（深入）”；
.content { grid-row: 2 / span 2; } /* 从第 2 行线开始，向下跨 2 行 */
.header { grid-row: span 1 / 2; } /* 结束于第 2 行线，向上跨 1 行（即占第 1 行） */注意第二行写法：当 span 出现在斜杠前，表示 grid-row-start 是“往前跨”，终点是后面那个值；这种写法容易混淆，实际开发中更建议拆成 grid-row-start + grid-row-end 显式控制。
-
span跨的是“行轨道数”，不是像素高度，和fr单位共存时需注意比例关系 - 用命名线（如
grid-row: header / footer）比数字+span 更易维护，尤其在响应式中行数动态变化时 - Firefox 对
span前置语法支持略滞后，生产环境建议优先用后置span N形式
自动填充到底部的可靠方案：minmax + 1fr
真正稳定的“底部自动填充”，往往不依赖 span 或负数行号，而是靠轨道尺寸定义：
.container {
display: grid;
grid-template-rows: auto 1fr auto;
}
.header { grid-row: 1; }
.main { grid-row: 2; } /* 1fr 自动撑满剩余空间 */
.footer { grid-row: 3; }这个结构下，.main 会把所有未被 auto 占用的高度吃掉，.footer 自然贴底。比用 span 或负数更可控，也避免了隐式网格计算的不确定性。
需要动态判断是否撑满时，得靠 JS 检测 gridRowEnd 计算值或监听容器高度变化——CSS 本身没有“如果内容不够就拉伸，够了就不动”的条件逻辑。
