grid-row跨行的正确写法是start/end行线编号，如1/3占第1、2行；span更直观，如2/span2占第2、3行；须区分行线与轨道，1/2无效，1/3才占满前两行轨道。
grid-row 跨行的正确写法是 grid-row: start / end
直接写 grid-row: 1 / 3 表示从第 1 行线开始，到第 3 行线结束，实际占据第 1 和第 2 行（共 2 行）。行线编号从容器顶部开始，最顶是 1，往下递增；最后一行线编号等于行数 + 1。
-
grid-row: 2 / 4→ 占据第 2、3 行（起始行线 2，终止行线 4） -
grid-row: 1 / -1→ 从顶到底，跨所有行（-1指最后一行线） - 不能写
grid-row: 1 3或grid-row: 1-3，语法错误，浏览器会忽略
用 span 关键字更直观地表达“跨几行”
当不关心具体起始位置，只关心跨越数量时，span 更安全、可读性更高：
-
grid-row: 2 / span 2→ 从第 2 行线开始，向下跨 2 行（即到第 4 行线），占第 2、3 行 -
grid-row: span 3→ 自动起始于第一条可用行线，跨 3 行（等价于1 / 4） -
span不依赖绝对行号，更适合动态内容或响应式布局
常见错误：混淆行线（line）和行轨道（track）
Grid 的 grid-row 操作的是**行线**（row lines），不是“第几行内容”。比如定义了 grid-template-rows: 100px 200px，就有 3 条水平行线：1（顶）、2（100px 下）、3（再下 200px）、4（底）。跨行本质是选两条线之间的区域。
- 误以为
grid-row: 1 / 2是“第一行”，其实是“第一行轨道的上半部分”（高度为 0，不可见） - 想占满前两行轨道？必须写
grid-row: 1 / 3，不是1 / 2 - 用
grid-row-start和grid-row-end拆开写也等效，但不如简写清晰
兼容性和调试建议
现代浏览器对 grid-row 支持良好，但 IE 完全不支持 Grid。调试时推荐在 DevTools 中勾选“Show line numbers”（Chrome/Firefox 均有），能直观看到行线编号与元素覆盖关系。
立即学习“前端免费学习笔记（深入）”；
- 若元素没如预期跨行，先检查父容器是否设置了
display: grid或display: inline-grid - 确认
grid-template-rows是否已定义 —— 否则浏览器按自动行高计算，行线位置可能不符合直觉 - 避免混用
grid-row和align-self等对齐属性干扰跨行视觉效果
.container {
display: grid;
grid-template-rows: 80px 120px 60px;
}
.item {
grid-row: 1 / -1; /* 从顶到底，跨全部 3 行轨道 */
}
跨行本身不难，难的是默认把“第 n 行”理解成轨道而非线。只要盯住行线编号，start / end 就不会错。