网格行定位属性
最后更新：2026-09-13
grid-row 网格行定位属性
grid-row 是 grid-row-start 和 grid-row-end 的简写属性，用于在网格布局中沿垂直方向定位网格项。通过指定起始和结束的网格线编号，你可以控制一个网格项跨越多少行，与 grid-column 配合可以精确控制网格项的位置和尺寸。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
grid-row: <grid-line> [ / <grid-line> ]?;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<grid-line> / <grid-line> | 值 | 网格行定位 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-row | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： grid-row: span 2 表示跨越两行，写法与 grid-column 一致。
提示： 行网格线从顶部开始编号为 1，负数从底部开始计数，-1 表示最底部的线。
❓ 常见问题
Qgrid-row 和 grid-column 可以同时使用吗？
A可以。两者分别控制垂直与水平定位，是正交关系，常配合使用。例如 grid-row: 1 / 3 与 grid-column: 2 / 4 让项目跨 2 行 2 列；只定位一个方向时，另一方向用 auto 自动放置。要同时设四个网格线值可直接用 grid-area。
Q如何让网格项自动延伸到末尾？
A使用 grid-row: 1 / -1 可以从第一行延伸到最后一行，-1 表示最后一条网格线，且网格行数变化时仍自动匹配末尾。同理 grid-column: 1 / -1 可让项目横跨整行。负索引是网格定位中处理未知轨道数量时最实用的写法。
Qgrid-row: span 2 单独使用可以吗？
A可以。只写 span 值时起始线为 auto，浏览器把网格项放到自动放置算法确定的位置，再向下跨越 2 行，适合内容数量不确定的列表。若想同时控制起始位置，写 grid-row: 2 / span 2 表示从第 2 条网格线开始向下跨 2 行。span 在网格线重排时比写死结束线更稳定。
🏷️ 相关属性
💡 相关案例
📚 相关教程
