CSS Grid布局中，行列跨度的计算核心围绕网格线展开，通过指定元素起始和结束的网格线位置，就能确定元素占据的行数和列数，理解网格线的编号规则是计算跨度的前提。
网格线的基础编号规则
Grid容器的网格线分为列网格线和行网格线，默认从1开始正向编号，也可以从-1开始反向编号。假设我们定义了一个3列2行的网格，列网格线编号为1、2、3、4，行网格线编号为1、2、3。正向编号从左到右、从上到下递增，反向编号从右到左、从下到上递减。
基础网格定义示例
/* 定义3列2行的网格容器 */
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
gap: 10px;
}
行列跨度的计算方式
行列跨度通过grid-column和grid-row属性设置，这两个属性是grid-column-start/grid-column-end和grid-row-start/grid-row-end的简写，语法为起始线 / 结束线。
跨度数量的计算公式为：结束线编号 - 起始线编号 = 占据的网格数量，这个规则对行和列都适用。
列跨度计算示例
如果需要让元素占据2列，起始列网格线为1，结束列网格线为3，那么跨度就是3-1=2列，代码如下：
/* 元素占据第1到第3列网格线之间的区域，即2列 */
.grid-item {
grid-column: 1 / 3;
}
也可以使用span关键字直接指定跨度数量，比如grid-column: 1 / span 2表示起始线为1，向后跨越2列，效果和上面的写法一致。
行跨度计算示例
同理，行跨度的计算方式和列完全一致，比如让元素占据2行，起始行网格线为1，结束行网格线为3：
/* 元素占据第1到第3行网格线之间的区域，即2行 */
.grid-item {
grid-row: 1 / 3;
}
特殊场景的跨度计算
反向编号的跨度计算
当使用反向编号时，跨度计算依然遵循结束线减起始线的规则，不过反向编号的数值是负数，比如列网格线反向编号为-1（最右）、-2、-3、-4（最左），如果要让元素占据最后2列，可以写成：
/* 起始线为-3，结束线为-1，跨度为(-1) - (-3) = 2列 */
.grid-item {
grid-column: -3 / -1;
}
隐式网格下的跨度计算
如果设置的结束线超出了显式网格的范围，Grid会自动生成隐式网格，跨度计算依然按照网格线编号来，比如显式网格只有3列，设置grid-column: 1 / 5，那么会生成1列隐式列，元素总共占据4列，跨度为4。
常见跨度设置对照表
| 需求 | grid-column写法 | 计算逻辑 | 占据列数 |
|---|---|---|---|
| 占1列 | 1 / 2 | 2-1=1 | 1 |
| 占2列 | 1 / 3 或 1 / span 2 | 3-1=2 或 span指定2 | 2 |
| 占最后1列 | -2 / -1 | (-1) - (-2) =1 | 1 |
| 占最后2列 | -3 / -1 | (-1) - (-3) =2 | 2 |
完整布局示例
下面是一个3列3行的完整网格布局，其中第一个元素跨2列2行，第二个元素跨2列，第三个元素跨2行：
<div class="grid-container"> <div class="item item1">跨2列2行</div> <div class="item item2">跨2列</div> <div class="item item3">跨2行</div> <div class="item item4">普通元素</div> <div class="item item5">普通元素</div> </div>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
gap: 10px;
}
.item {
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
/* 跨2列2行：列1-3，行1-3 */
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
background: #a1c4fd;
}
/* 跨2列：列3-5（触发隐式列） */
.item2 {
grid-column: 3 / span 2;
background: #c2e9fb;
}
/* 跨2行：行3-5（触发隐式行） */
.item3 {
grid-row: 3 / span 2;
background: #d4fc79;
}
css_gridgrid_columngrid_rowgrid_template修改时间：2026-07-10 15:03:31