span必须配合grid-column或grid-row使用，表示从指定轨道线起跨越N条轨道；单独写span 3会默认从第1线开始，易导致错位；起点与span共存时终点自动推导，不可与显式终点混用。
span 在 grid-column 和 grid-row 中的写法
span 不是独立属性，必须配合 grid-column 或 grid-row 使用，表示“从当前轨道开始，跨越 N 条轨道”。比如 grid-column: 2 / span 3 意思是：从第 2 条列线开始，向右跨 3 列（即占第 2、3、4 列），终点线是第 5 条列线。
常见错误是写成 grid-column: span 3 —— 这样浏览器会默认从第 1 条线开始，但实际起始位置常不可控，尤其在自动布局或响应式场景下容易错位。
-
grid-column: span 2→ 从隐式起始线开始跨 2 列（不推荐，行为依赖上下文） -
grid-column: 1 / span 2→ 明确从第 1 条列线开始，占 2 列 -
grid-row: span 1等价于不写span，但显式写出可增强可读性
span 和具体轨道号混用时的优先级
当同时指定起点和 span（如 grid-column: 2 / span 3），终点由起点 + span 自动推导；若同时写了起点和终点（如 grid-column: 2 / 5），span 被忽略。两者不能共存于同一声明中。
容易踩的坑：误以为 grid-column: span 3 / 5 合法——这是语法错误，浏览器直接丢弃整条声明。
立即学习“前端免费学习笔记（深入）”；
- 合法：
grid-column: 2 / span 3（起点明确，span 推导终点） - 合法：
grid-column: 2 / 5（起点终点都明确） - 非法：
grid-column: span 3 / 5或grid-column: 2 / span 3 / 5
span 跨越隐式网格线的风险
如果 span 的终点超出了已定义的网格轨道（比如 grid-template-columns: 100px 100px，却写 grid-column: 1 / span 5），浏览器会自动创建隐式轨道补足，但这些轨道尺寸默认为 auto（内容撑开），不是等宽的 100px。
这意味着视觉上可能突然变宽或换行，尤其在 flexbox 混合布局或容器宽度受限时更明显。
- 想保证隐式列宽一致？加
grid-auto-columns: 100px - 想禁止隐式扩展？用
grid-auto-columns: none（但会截断内容，慎用） - 调试技巧：给
grid容器加outline: 1px solid red，再用开发者工具看实际网格线位置
span 在响应式布局中为什么有时失效
根本原因不是 span 本身，而是 grid-template-columns 在媒体查询中重定义后，原有轨道编号失效。比如桌面端定义了 12 列，grid-column: 3 / span 4 占中间 4 列；切换到移动端只有 4 列，第 3 条线还存在，但 span 4 会跑到第 7 条线——而这时只有 5 条线（4 列 → 5 条线），结果元素被挤到隐式区域。
解决思路不是删 span，而是让起点/终点更健壮：
- 用
grid-column: -3 / -1（从末尾倒数）替代固定数字，适配列数变化 - 结合
grid-column: auto / span 2让起点由自动定位决定，再固定跨距 - 避免在多断点中复用同一组
span值，除非你确认所有断点下的轨道数都支持该跨度
真正难的不是写 span，而是预判它在不同 grid-template 下的终点是否仍在预期区域内。
