使用 span 可让 Grid 子元素跨越多行或多列，语法为 start-line / span N，常用于页头、侧边栏、画廊等布局，相比直接指定结束线更灵活易读，提升响应式设计效率。
在 CSS Grid 布局中，让子元素跨越多个网格区域是实现复杂页面结构的关键能力。通过 span 关键字，我们可以轻松控制网格项占据的行或列的数量，从而灵活布局内容。
使用 span 控制跨越范围
要让一个网格子元素横跨多列或多行，可以在 grid-column 或 grid-row 属性中结合 span 使用。语法格式为 start-line / span N，其中 N 表示跨越的轨道数量。
- grid-column: 2 / span 3; 表示从第 2 条垂直线开始，向右跨越 3 列
- grid-row: 1 / span 2; 表示从第 1 行开始，向下跨越 2 行
- 也可以简写在 grid-area 中，如：grid-area: 1 / 2 / span 2 / span 3;
实际应用场景举例
span 技巧在常见网页布局中非常实用，比如构建卡片、表单、仪表盘等结构。
- **页头横跨多列**：在一个三列布局中，页头可设置为 grid-column: 1 / span 3;，使其占满整个宽度
- **侧边栏布局**：左侧导航栏可设为 grid-column: 1 / span 1;，主内容区设为 grid-column: 2 / span 2;，实现不对称分栏
- **图片画廊**：某个大图需要突出显示时，用 span 2 跨越两行或两列，增强视觉层次
与数字定位的对比优势
相比直接指定结束线（如 grid-column: 2 / 5;），使用 span 更具语义性和灵活性。
- 无需计算具体的结束网格线编号，只需关注跨度数量
- 在响应式设计中更容易调整，配合媒体查询动态改变 span 值即可适应不同屏幕
- 代码更易读，一看便知该元素“想占几个格子”
基本上就这些。掌握 span 的用法，能大幅提升 Grid 布局的效率和可维护性。它不是最复杂的特性，但却是日常开发中最常使用的技巧之一。
