CSS Grid行跨度异常：grid-row:x/y语法未达预期效果求助

我想让第二个网格项跨两行，用grid-row: span 2能实现预期效果，但换成grid-row: x/y的数值语法就达不到目的。附上代码、效果说明，排查过CSS和调整数值还是没解决，求分析原因。

代码示例 #

CSS代码

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rosybrown;
  background: #fff;
}

.container {
  display: grid;
  max-width: 960px;
  padding: 10px;
  margin: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.item {
  background: steelblue;
  color: white;
  font-size: 20px;
  padding: 20px;
  border: skyblue 1px solid;
}

.item:nth-child(1) {
  grid-column: 1/3;
  background-color: springgreen;
}

.item:nth-child(2) {
  background-color: royalblue;
  grid-row: 1/3; /* 这里用数值语法失效 */
}

.item:nth-child(3) {
  background: darkred;
}

.item:nth-child(5) {
  grid-column: 1/4;
}

HTML代码

<div class="container">
  <div class="item"> item1 </div>
  <div class="item"> item2 </div>
  <div class="item"> item3 </div>
  <div class="item"> item4 </div>
  <div class="item"> item5 </div>
</div>

效果说明 #

• 实际效果：item1占据第1-2列的第一行，item2只在第3列的第一行，高度和item1一致；item3、item4分别在第2行的第1、2列；item5横跨三列在最底部。item2没有实现跨两行。
• 预期效果：item2在第3列，同时横跨第一、第二两行，高度和左侧item1+item3/item4的总高度一致；item3、item4在第2行的第1、2列；item5在最底部横跨三列。

问题原因 #

核心差异在于两种语法的轨道计算逻辑：

• grid-row: span 2是相对定位：从当前网格项所在的行轨道开始，向下强制跨越2个行轨道，不管其他元素的布局，自动占据对应空间。
• grid-row: 1/3是绝对网格线定位：指定从第1条水平网格线开始，到第3条水平网格线结束。但在当前元素顺序下，第3条网格线的位置由item3、item4所在的第2行轨道决定，而item2在第2行轨道的第3列没有内容支撑，浏览器不会主动将item2的高度延伸到第3条网格线，导致它仅显示在第1行。

解决办法 #

如果一定要用数值语法，有两种可行方案：

1. 结合起始线与跨度：把item2的grid-row:1/3改成grid-row: 1 / span 2，既指定起始网格线，又明确向下跨2行，逻辑和span 2一致，能实现预期效果。
2. 预先定义行轨道：给容器添加grid-template-rows: repeat(2, auto)，提前创建2个行轨道，此时grid-row:1/3就能准确跨越这两个预定义的轨道，实现跨两行。

内容的提问来源于stack exchange，提问作者SH1000