css grid子元素跨行跨列怎么写_使用grid-column和grid-row控制_网络技术

发布时间 - 2026-02-02 00:00:00 点击率：次

grid-column 和 grid-row 指定子元素起止网格线而非行列数，如 grid-column: 2 / 4 表示从第2条竖线到第4条竖线（占2列）；支持正负线号、span语法及 grid-area 简写，需注意显式线号存在性与响应式适配。

这两个属性用来指定子元素在网格中的起止位置，不是“占几行几列”，而是“从第几条线开始、到第几条线结束”。比如 grid-column: 2 / 4 表示从第 2 条竖向网格线开始，到第 4 条竖向网格线结束（即跨越第 2、3 两列）。

常见错误是写成 grid-column: 1 / 3 却以为占了 3 列——其实只占 2 列（列 1 和列 2），因为终点线不包含在内。

最常出问题的是线号错位：网格线编号从 1 开始，但很多人误以为从 0 开始；另外，显式定义的 grid-template-rows 或 grid-template-columns 会影响线号总数，而隐式生成的轨道（自动换行产生的）不会增加显式线号。

没定义 grid-template-rows 时，grid-row: 1 / 3 可能无效——因为只有 1 条显式横线（grid-row: 1 是起点，但第 3 条线根本不存在）
span 后面跟数字时，它只按“轨道数”算，不看内容高度。比如 grid-row: 2 / span 2 就是占第 2、3 行轨道，哪怕第 3 行是 auto 高度
用负数线号时，grid-column: -2 / -1 是最后一列，但 grid-column: -1 / -2 会失效（起点不能大于终点）

如果同时控制行列起止，直接用 grid-area 更清晰，语法是 grid-area: row-start / column-start / row-end / column-end。

例如：grid-area: 2 / 3 / 4 / 5 等价于：grid-row: 2 / 4 + grid-column: 3 / 5。省去重复声明，也避免漏写某一项。

用线号写死位置（

如 grid-column: 1 / 4）在响应式布局中容易断裂——当列数随屏幕变化时，第 4 条线可能不存在，导致元素被挤到隐式网格里，甚至消失。

优先考虑 span 写法（如 grid-column: 1 / span 3），它更适应列数变化
媒体查询中重设 grid-column 时，记得同步调整 grid-row，否则可能重叠或错位
JavaScript 动态修改时，直接改 style.gridRow 或 style.gridColumn 即可，值为字符串，如 "2 / span 2"

实际跨行跨列的关键不在“怎么写”，而在“线号是否真实存在”——多数失效问题都源于对显式/隐式网格线的误判。