grid-row: span 100会溢出失效，因span只跨固定行数；正确填满剩余行应写grid-row: 2 / -1，其中-1指末行线，span不支持负数且无自动补全语义。
grid-row: span 100 会出问题吗
不会自动填满剩余行，反而可能溢出或失效。span 后面跟具体数字是「跨固定行数」，不是「跨到末尾」。比如网格容器共 6 行，grid-row: span 100 会让该项尝试占据 100 行——超出容器范围，浏览器会截断或忽略部分声明，实际表现不可靠。
grid-row: span -1 不是标准用法
CSS Grid 规范里 span 不接受负数。写成 grid-row: span -1 会被浏览器直接丢弃，等同于没写该声明。别指望它实现「反向占满」或「自动补全」——这属于常见误解，根源是混淆了 span 和 auto 的语义。
真正能跨越所有剩余行的写法
要用 grid-row 的隐式终点语法：grid-row: 2 / -1 或 grid-row: 2 / 100（后者依赖已知最大行号）。更稳妥的是 grid-row: 2 / -1，其中 -1 指「最后一行线」，即从第 2 行线开始，一直延伸到网格容器的末尾行线。
-
grid-row: 1 / -1→ 占满全部行（从首行线到末行线） -
grid-row: 3 / -1→ 从第 3 行线起，撑满剩余所有行 - 前提是容器设置了
grid-template-rows或依赖隐式网格，否则-1可能不生效 - 若容器行数动态变化（如 JS 插入新行），
-1仍有效；但span N必须提前知道 N
为什么不用 grid-row: auto / -1
auto 在 grid-row 的起始位置（第一个值）表示「由 grid-placement 算法决定起点」，和 -1 组合后行为不确定：有的浏览器会忽略，有的会回退到默认单行。实测中 grid-row: auto / -1 并不能可靠撑满剩余行，尤其在有其他项竞争时容易被压缩。明确指定起始行线（如 2、3）才是可控做法。
关键点在于：CSS Grid 没有「从当前位置跨到末尾」的相对语法；span 是绝对数量，/ -1 是绝对位置。需要手动算好起点行号，或者用 JS 动态计算并注入 CSS 变量——纯 CSS 场景下，别绕开行线编号直接幻想“自动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
