跨度指网格项跨越的行或列数，通过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: <start> / span <number>;grid-row: <start> / span <number>;
其中 span <number> 表示该元素要跨越的行数或列数。
立即学习“前端免费学习笔记（深入）”；
如何计算列跨度
假设你有一个 3 列的网格容器：
display: grid;grid-template-columns: 1fr 1fr 1fr;
你想让某个子元素从第 2 条垂直线开始，横跨 2 列：
grid-column: 2 / span 2;这表示：从第 2 条线开始，向右跨越 2 个列轨道。最终会占据第 2 和第 3 列。
也可以反过来写：
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 的核心是理解“从哪开始，跨几格”，结合网格线编号就能准确控制布局。不复杂但容易忽略细节。
