grid-row: 1 / -1 不生效的主因是父容器未设 display: grid 或未用 grid-template-rows 定义至少两行轨道，因 -1 指最后一根显式行线，单行时仅存 line 1 和 2，故 1 / -1 等价于 1 / 2。
grid-row: 1 / -1 为什么有时不生效
直接写 grid-row: 1 / -1 不起作用，最常见的原因是父容器没设 display: grid，或者没定义明确的行轨道（grid-template-rows）。CSS Grid 的负值行号（如 -1）是相对于显式定义的行线来计算的——如果没用 grid-template-rows 或 grid-auto-rows 建立至少两行，-1 就等同于 1，跨行效果自然消失。
必须配合 grid-template-rows 才能触发跨行行为
grid-row: 1 / -1 中的 -1 指的是「最后一根显式行线」，不是内容高度末尾。所以你需要让网格容器有至少两行线（即至少一行轨道），否则没有“最后一行线”可引用。
正确做法示例：
.container {
display: grid;
grid-template-rows: 100px 1fr; /* 至少两行 → 产生 line 1, 2, 3 */
}
.item {
grid-row: 1 / -1; /* 跨越 line 1 到 line 3，即占满所有行轨道 */
}
- 若只写
grid-template-rows: 100px（单行），则只有 line 1 和 line 2，-1就等于 line 2，1 / -1等价于1 / 2，只占第一行 -
grid-auto-rows定义的隐式行线不参与-1计算，-1只认grid-template-rows生成的显式行线 - 用
grid-template-rows: repeat(3, 1fr)会生成 line 1–4，此时1 / -1=1 / 4，跨全部三行
替代方案：用 span 关键字更直观
如果你只是想让子元素撑满所有行轨道，grid-row: 1 / -1 并非唯一写法，且容易因行线数量变化而意外失效。更稳的方式是用 span：
.item {
grid-row: 1 / span 99; /* 假设你最多就 99 行，足够覆盖 */
/* 或更安全： */
grid-row: 1 / -1;
/* 但前提是父容器已明确定义了 ≥2 行 */
}
-
span N是相对当前起始行向下跨 N 条线，不受显式行数限制，适合动态内容 - 但
span无法向上跨（比如从第 3 行跨到第 1 行），而1 / -1天然支持起点固定、终点锚定末尾 - 如果网格有
grid-auto-flow: column，注意grid-row依然控制行位置，但布局方向变了，跨行逻辑不变
常见误用场景和调试建议
遇到 grid-row: 1 / -1 没反应，优先检查这几点：
- 父元素是否漏了
display: grid或display: inline-grid - 是否写了
grid-template-rows且值包含至少两个轨道（哪怕一个是0px） - 浏览器 DevTools 里看 computed 样式中
grid-row-start和grid-row-end是否真解析成了数字（比如1和3），还是显示为auto - 子元素是否被其他定位规则（如
position: absolute）干扰，导致脱离 Grid 流 - 在 Flexbox 容器里写
grid-row完全无效——它只对 Grid 容器的直系子项起作用
负索引跨行看着简洁，但依赖显式网格结构；实际项目中，多数时候你真正需要的只是“占满可用行空间”，这时候 grid-row: 1 / -1 看似聪明，反而比加一行 grid-template-rows: 100% 0px 更难 debug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
