17370845950

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-ro

  

  w 和 align-self 等对齐属性干扰跨行视觉效果

.container {
  display: grid;
  grid-template-rows: 80px 120px 60px;
}
.item {
  grid-row: 1 / -1; /* 从顶到底，跨全部 3 行轨道 */
}

跨行本身不难，难的是默认把“第 n 行”理解成轨道而非线。只要盯住行线编号，start / end 就不会错。