跨度指网格项跨越的行或列数，通过grid-column和grid-row配合span使用；例如grid-column: 2 / span 2表示从第2条线开始跨越2列，占据第2至第3列；同理grid-row: 1 / span 3表示从第1行开始跨3行；可省略起始线写为span 2，默认从当前位置起跨，支持负数线号与响应式布局。

在 CSS Grid 布局中，行列跨度（span）的计算方式非常直观，主要通过 grid-column 和 grid-row 属性来控制元素跨越多少行或列。

什么是跨度（span）？

“跨度”指的是一个网格项（grid item）从起始线开始，跨越多少行或列。你可以指定它从某条线开始，并跨越若干个网格轨道（track）。

语法格式如下：

grid-column: / span ;
grid-row: / span ;

其中 span 表示该元素要跨越的行数或列数。

如何计算列跨度

假设你有一个 3 列的网格容器：

display: grid;
grid-template-columns: 1fr 1fr 1fr;

你想让某个子元素从第 2 条垂直线开始，横跨 2 列：

grid-column: 2 / span 2;

这表示：从第 2 条线开始，向右跨越 2 个列轨道。最终会占据第 2 和第 3 列。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

也可以反过来写：

grid-column: span 2 / 4;

意思是：跨越 2 列，并结束于第 4 条线，那么它就会从第 2 条线开始（因为 4 - 2 = 2）。

如何计算行跨度

行跨度的逻辑完全一样。例如：

grid-row: 1 / span 3;

表示这个元素从第 1 行开始，向下跨越 3 行，占据第 1、2、3 行。

如果网格只有 3 行，那它就会填满整个高度。

使用 span 的实用技巧

• 不写起始线时，默认从当前所在位置开始。例如 grid-column: span 2; 会让元素自动从它原本的起始列开始，横向占两格。
• 可以结合负数线号使用，比如 grid-column: -2 / span 1; 表示从倒数第 2 条线开始，占 1 列。
• 用 span 能更灵活地实现响应式布局，比如在小屏上让某些元素竖向堆叠（span 多行），大屏上平铺。

基本上就这些。掌握 span 的核心是理解“从哪开始，跨几格”，结合网格线编号就能准确控制布局。不复杂但容易忽略细节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！