关于CSS Grid负值语法的疑问：首尾行列语法为何不一致？

这个问题问到了CSS Grid网格线编号的核心规则，我来给你拆解清楚：

首先，明确CSS Grid的网格线逻辑 #

CSS Grid容器会生成一组网格线：

• 垂直网格线（对应列）：如果有n列，就会有n+1条垂直网格线，正整数从左到右计数（1、2、...、n+1），负整数从右到左计数（-1、-2、...、-(n+1)）。
• 水平网格线（对应行）：如果有m行，就会有m+1条水平网格线，正整数从上到下计数（1、2、...、m+1），负整数从下到上计数（-1、-2、...、-(m+1)）。

而行轨道（也就是我们看到的“行”）是两条相邻网格线之间的区域：

• 第1行 = 网格线1到2之间的区域
• 最后一行 = 网格线m到m+1之间的区域，对应负编号就是-2到-1之间的区域

为什么grid-row:1/1看起来能选中第一行？ #

你写的grid-row:1/1其实是把元素的起始和结束网格线都设为1，严格来说这会让元素的行跨度为0（没有占据任何行轨道）。但浏览器会做容错处理：当元素有内容，且网格容器的行高（比如你设置的minmax(50px, 2fr)）有明确尺寸时，浏览器会自动把这个元素放到第一行轨道里，相当于你写了grid-row:1（简写，默认跨度1行，即1/2）。这其实是一种“意外生效”，并非规范内的正确用法。

为什么grid-row:-1/-1无法选中最后一行？ #

而grid-row:-1/-1是把起始和结束网格线都设为-1（最后一条水平网格线），这时候元素没有跨越任何行轨道，高度为0，自然看不到。要选中最后一行，你需要明确指定它的范围是倒数第二条网格线到最后一条网格线，也就是grid-row:-2/-1，这正好对应最后一行的轨道区域。

修正你的示例代码 #

把.border-bottom的grid-row改成-2/-1就能正常显示底部的边框了：

.border-bottom { 
  background: #410266; 
  grid-column: 2/-1; 
  grid-row: -2 / -1; /* 正确选中最后一行 */
}

总结一下：

• 正确选中第一行的写法：grid-row:1 或 grid-row:1/2
• 正确选中最后一行的写法：grid-row:-2/-1 或 grid-row:-1（简写，默认跨度1行，即-2/-1）

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