grid-column 和 grid-row 的简写会覆盖单侧属性，混用时需确保简写在后；span 表示跨轨道而非跨列；grid-area 四数字写法更安全但不支持 span；负数线号与 end 等价，起点固定才可靠。
grid-column 和 grid-row 的合并写法为什么有时不生效
因为 grid-column 和 grid-row 是简写属性，它们会覆盖掉单独设置的 grid-column-start/grid-column-end 等值。如果你之前用过单侧属性，再写简写，后写的会赢，但容易误以为“没起作用”。
常见错误现象：grid-column-start: 2; 后紧跟 grid-column: 1 / 3;，结果元素从第 1 栏开始占两格——grid-column-start 被完全忽略。
- 只用简写：统一用
grid-column: a / b;或grid-column: span n; - 混用时注意顺序：简写必须写在单侧属性之后，否则会被覆盖
- 调试技巧：在开发者工具里看 Computed 面板，检查最终生效的是哪一组值
span 关键字在 grid-column/row 中的真实行为
span 不是“跨几列”，而是“从起点出发，跨越多少个网格轨道”。它依赖于起点位置，而起点可能由隐式定位、grid-column-start 或源顺序决定。
使用场景：动态内容布局、响应式卡片栅格、避免硬编码终点索引。
立即学习“前端免费学习笔记（深入）”；
-
grid-column: span 2;表示“从当前自动分配的位置向右跨 2 条线”，不是“占 2 栏” -
grid-column: 2 / span 3;合法：起点是第 2 线，终点是第 2 线 + 3 = 第 5 线 -
grid-column: span 3 / 5;非法：语法要求起点在前、终点在后，不能倒置 - 性能影响：含
span的声明不会触发重排，但若起点不确定（比如靠 auto-placement），渲染引擎需多一步计算
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 完全不支持
grid-area数字语法，但现代浏览器都 OK；如需兼容 IE，只能退回到单属性写法 - 可读性权衡：四数字写法紧凑，但不如
grid-column: 2 / -1;直观表达“从第 2 线到最后一根线”
负数线号和 end 关键字在合并场景下的优先级
负数线号（如 -1）指向容器末尾的网格线，end 是语义别名（grid-column-end: end ≡ grid-column-end: -1），但二者在简写中行为一致，没有优先级差异。
真正影响结果的是“起点是否固定”：如果起点未显式指定，负数终点可能导致意料之外的自动对齐。
-
grid-column: -3 / -1;表示“从倒数第 3 线到倒数第 1 线”，占 2 栏，稳定可靠 -
grid-column: span 2 / -1;表示“从某起点向右跨 2 条线，且终点必须落在倒数第 1 线”——起点会被强制调整以满足该约束，可能跳到前一列 - Chrome 和 Firefox 对负数线号解析一致，但某些早期版本 Safari 在嵌套 Grid 中对
-1解析有偏差，建议在关键布局中加视觉验证
合并单元格这件事，本质是控制四条线的位置。很多人卡在“想让内容居中跨三列”，却写了 grid-column: span 3; 放在默认起点，结果贴左了——这时候要的不是 span，是 grid-column: 2 / -2; 或明确起点。线号思维比“跨几格”更接近 Grid 的真实模型。
