grid-column和grid-row语法只有start/end或start/span n两种结构，基于从1开始编号的网格线而非行列数；如grid-column: 1 / 3跨2列，grid-column: 2等价于2 / 3，span需配合起点使用，负数线号与end等价，grid-area四值写法更可靠但不支持span。
grid-column 和 grid-row 的语法结构其实就两种
它们不是“从第几列到第几列”，而是“从第几条线到第几条线”——这个起点/终点都指网格线（grid lines），编号从 1 开始。记不住？就记住：start / end 或 start / span n 这两种组合，其他都是变体。
常见错误现象：grid-column: 1 / 3 被当成“占 3 列”，实际只跨 2 列（线 1→线 2→线 3，终点线不包含在内）；grid-row: 2 / 1 直接失效，起点不能大于终点。
-
grid-column: 2等价于grid-column: 2 / 3（隐式 span 1） -
grid-column: span 2表示“从当前自动分配的位置向右跨 2 条线”，起点不确定时行为难预测 -
grid-column: 2 / -1是安全写法：从第 2 条线到最后一根线，不用数总列数 - 负数线号和
end关键字等价：grid-column-end: -1≡grid-column-end: end
混用单侧属性和简写时为什么值被覆盖
grid-column 是 grid-column-start 和 grid-column-end 的简写，写在后面的会完全覆盖前面的单侧设置。这不是 bug，是 CSS 层叠规则本身决定的。
常见错误现象：grid-column-start: 2; 后跟 grid-column: 1 / 3;，结果元素从第 1 线开始——grid-column-start 被彻底忽略。
- 只用简写：统一写
grid-column: a / b或grid-column: a / span n - 必须混用时：把简写写在单侧属性之后（顺序敏感）
- 调试建议：打开开发者工具 → Computed 面板，看最终生效的是哪一组值，别只盯 Styles 面板
span 在 grid-column/grid-row 中的真实含义
span 不是“占几列”，而是“跨越多少个网格轨道”——它依赖起点位置，而起点可能由源顺序、auto-placement 或显式 grid-column-start 决定。这点最容易误判。
使用场景：响应式卡片栅格、动态插入内容、避免硬编码终点线号。
-
grid-column: 2 / span 3合法：起点是线 2，终点 = 线 2 + 3 = 线 5 -
grid-column: span 3 / 5非法：语法强制起点在前、终点在后 -
grid-row: span 2 / -1合法：起点由 auto-placement 决定，再向前跨 2 行轨道，终点到末尾 - 性能影响：含
span的声明不会触发重排，但若起点未固定（比如没设grid-column-start），渲染引擎需额外计算
grid-area 四数字写法比分开写更可靠
grid-area 是 grid-row-start/grid-column-start/grid-row-end/grid-column-end 的合并写法，且**不支持 span**——这反而是优势：语义明确、无歧义、兼容性更好（包括旧版 Safari）。
容易踩的坑：以为 grid-area 只能配合命名区域用，其实它接受纯数字线号，也支持负数。
- 合法：
grid-area: 1 / 2 / 3 / 4（等价于四边分别设值） - 非法：
grid-area: 1 / 2 / span 2 / span 3（span在这里不被识别） - IE 完全不支持数字语法，如需兼容 IE，只能退回单属性写法
- 可读性权衡：
grid-column: 2 / -1比grid-area: auto / 2 / auto / -1更直观
grid-column-start 或用了正数线号），span 和负数线号就可靠；一旦依赖 auto-placement，span 的行为就会随上下文漂移。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
