网格列定位属性

最后更新：2026-09-13

grid-column 网格列定位属性

grid-column 是 grid-column-start 和 grid-column-end 的简写属性，用于在网格布局中沿水平方向定位网格项。通过指定起始和结束的网格线编号，你可以控制一个网格项跨越多少列，是实现灵活网格布局的关键属性。

分类
初始值	auto
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

grid-column: <grid-line> [ / <grid-line> ]?;

⚙️ 取值

值	类型	描述
`<grid-line> / <grid-line>`	值	网格列定位

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
grid-column	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： 使用 span 关键字可以指定跨越的轨道数量，例如 grid-column: span 2 表示跨越两列。

提示： 网格线编号从 1 开始，最左侧为 1；也可以使用负数从右往左计数，-1 表示最右侧的线。

❓ 常见问题

Qgrid-column: 1 / 3 和 1 / span 2 有什么区别？

A在大多数情况下效果相同：1 / 3 表示从第 1 条网格线跨到第 3 条线，span 2 表示从第 1 条线开始跨越 2 个轨道。区别在于网格结构调整时，span 按轨道数量计算更鲁棒，而写死的结束线可能因新增列而错位。需要跨越的数量明确时优先用 span。

Q网格项可以重叠吗？

A可以。多个网格项可以定位到相同的网格区域从而重叠，配合 z-index 控制层叠顺序，这是实现杂志式布局、叠加标签等效果的基础。但重叠会遮挡点击和阅读，需确保内容可访问性，常规布局中避免无意重叠。

Qgrid-column: span 2 只写一个值时怎么理解？

A只写一个值时，未写的网格线默认为 auto，浏览器用自动放置算法为网格项找到位置，再让它跨越指定轨道数。grid-column: span 2 表示放在下一个可用位置并横跨 2 列；grid-column: 1 / span 2 则明确从第 1 条线开始跨 2 列。span 写法在网格线变动时更稳定。