### [Grid 跨行跨列不生效：网格线根本不存在](https://www.huociguo.com/article/1761)

**Published:** 2026-10-02T09:45:25

**Author:** 米了

**Excerpt:** 给某个网格项写了 grid-row: 1 / 3，页面没有任何变化，控制台也不报错。这类静默失效几乎只有一个根…

给某个网格项写了 grid-row: 1 / 3，页面没有任何变化，控制台也不报错。这类静默失效几乎只有一个根因：声明引用的网格线根本不存在。

![纸上的方格网格](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-28380105.jpeg)

跨距声明依赖真实存在的网格线。图片来自 Pexels。

## 线号从哪来

三列的网格只有四条列线，编号一到四。写 grid-column: 1 / 5 时，第五条线不存在，声明被丢弃。行方向同理，两行三线的结构里引用第四条行线同样无效。

## 绝对定位与相对跨度

grid-row: 1 / 3 是绝对线号定位，要求线号真实存在。grid-row: span 2 是相对跨度，从当前位置向后占两格，线不够时浏览器自动生成隐式轨道。两套机制混着理解，是大多数困惑的来源。

## 隐式网格的补偿

显式声明之外的区域叫隐式网格。项目被放到显式范围之外时，浏览器自动补轨道，尺寸由 grid-auto-rows 与 grid-auto-columns 控制，默认按内容撑开。跨距声明指向隐式区域时能生效，但轨道尺寸往往与预期不同。

## 排查三步

1.  开发者工具打开网格覆盖层，数清实际的线号。
2.  确认声明里的线号在覆盖层上找得到。
3.  需要弹性跨距时改用 span 写法，不依赖具体线号。

养成先画网格再写跨距的习惯，失效问题基本绝迹。

**Tags:** CSS Grid, grid-row, span跨距, 网格线, 隐式网格

**Categories:** HTML5

---