span不是独立属性，必须作为grid-column或grid-row值的一部分且仅出现在斜杠右侧；正确写法如grid-column: 2 / span 3，而grid-column-span或span: 2无效。
span必须和grid-column或grid-row一起用，单独写无效
很多人写 grid-column-span: 2 或 span: 2，浏览器直接忽略——CSS规范里压根没有这两个东西。span 不是属性，而是 grid-column 和 grid-row 值的一部分，且只能出现在斜杠右侧。
-
grid-column: span 2合法，但起点由 Grid 自动推断（通常是第一个空闲列），结果不可控 -
grid-column: 2 / span 3才是稳定写法：从第 2 条列线开始，向右占 3 条轨道（即第 2、3、4 列） -
grid-column: span 3 / 5是非法语法，整条声明会被丢弃
grid-area一行写完跨行+跨列，但顺序不能错
当既要跨行又要跨列，grid-area 是最紧凑的方案，但它有固定顺序：行起 / 列起 / 行跨 / 列跨。漏掉某项会回退到 auto，写错位置则失效。
-
grid-area: 1 / 2 / span 2 / span 3→ 行从第 1 线起、跨 2 行；列从第 2 线起、跨 3 列 -
grid-area: 1 / 2 / 3 / span 4→ 行从 1 到 3（占 2 行），列从 2 起跨 4 列 -
grid-area: 1 / span 2 / 3 / 4错误：span 只能出现在终点位置，不能插在中间
span 跨越后布局错位？大概率是轨道没撑开或隐式线被误用
表面看 span 没生效，实际常因网格容器没定义显式轨道，导致跨越落进隐式网格——那里的轨道尺寸默认是 auto，内容一撑就变形。
- 写了
grid-column: 1 / span 5，但grid-template-columns只设了 3 列 → 浏览器补 2 条隐式列线，宽度按内容算，可能窄得看不见或挤爆容器 -
grid-row: -2 / span 1合法（倒数第二行线起），但grid-row: span -2无效：span 不支持负数 - 网格项里放了
width: 100%的子元素，而所在列轨道是max-content→ 子项强行撑宽整列，连带影响其他项
响应式中用span要小心，硬写数字跨度容易越界
媒体查询切列数时，span 3 在 2 列布局下会触发隐式第 4 条线，行为难预测；相比起来，用命名线或负数线更稳。
立即学习“前端免费学习笔记（深入）”；
- 推荐
grid-column: 1 / -1（从第 1 列线到最右线），比span 12更适应列数变化 - 如果用了
grid-template-areas，优先用命名区域如grid-area: header，语义强、不依赖线号 -
grid-column: span 2在瀑布流类布局中可用，但在复杂嵌套或已手动定位其他项的容器里，极易因grid-auto-flow干扰而错位
grid-auto-flow 模式、甚至 HTML 源码顺序影响。不显式指定起点，等于把控制权交给浏览器。 
