最稳的跨行跨列方式是显式指定起止线号；grid-column: span 2 易受元素顺序和自动流影响而偏移；必须确保轨道定义足够（如跨3列需至少3列模板），并注意响应式下线号变化。
直接用 grid-column 和 grid-row 指定起止线，是最稳、最可控的方式；靠 span 自动推算容易偏移，尤其在有其他元素干扰时。
为什么 grid-column: span 2 常常不按预期占位
它依赖自动放置起点，而这个起点受元素顺序、grid-auto-flow、甚至 order 影响。常见现象：
- 前面一个元素占了
grid-column: 1 / 3，后面写grid-column: span 2，结果从第3列开始，跳到第5列（中间空一格） - 想让大图固定从第2列起跨2列，必须写全：
grid-column: 2 / span 2 -
grid-row: span 3可能落到隐式行里，高度失控——建议同步加grid-auto-rows: minmax(300px, auto)
显式定义轨道线是跨行跨列的前提
浏览器不会为你“脑补”不存在的线。比如你写 grid-column: 1 / 4，但容器只定义了 grid-template-columns: 1fr 1fr（只有3条竖线），那第4条线根本不存在，整条规则会被静默丢弃。
- 先确认列数：要跨3列，就得至少定义3列轨道 →
grid-template-columns: 1fr 1fr 1fr（生成4条竖线） - 行高也要预留：大图若需纵向拉伸，别只靠内容撑开，用
grid-template-rows: 400px 1fr或min-height显式约束 -
gap不产生新线，但会拉宽线间距——调试时别被视觉错觉骗了，线号还是 1、2、3…
用 grid-area 一行写死四条线更少出错
当大图位置固定（比如封面主视觉），grid-area 比分开写 grid-column + grid-row 更紧凑、不易漏项：
立即学习“前端免费学习笔记（深入）”；
-
grid-area: 1 / 1 / 3 / 4等价于grid-row: 1 / 3+grid-column: 1 / 4（跨2行3列） - 支持
span：grid-area: 1 / 2 / span 2 / span 3表示从第1行第2列起，跨2行3列 - 注意：
grid-area是简写，会覆盖grid-row-start等独立属性；DevTools 里看到某些属性变灰，不是失效，是被它覆盖了
响应式下大图突然缩成一小块？线号没重置
PC端 grid-template-columns: repeat(4, 1fr) 有5条竖线，grid-column: 1 / 4 有效；切到手机改成 repeat(1, 1fr) 后只剩2条线，原声明失效，回退到默认占1格。
- 断点里必须同步改轨道和区域：
@media (max-width: 768px) { .container { grid-template-columns: 1fr; } .hero-img { grid-area: 1 / 1 / 2 / 2; } } - 更推荐用负值线号适配：
grid-column: 1 / -1在任意列数下都表示“占满整行”，比硬写1 / 4更鲁棒 - 如果用
@container，记得给父容器设container-type: inline-size，否则断点不触发
真正卡住人的从来不是语法写错，而是线号根本不存在、或被隐式行/列悄悄干扰。动手前先数清容器有多少条线——这是所有跨行跨列操作的起点，也是最容易被跳过的一步。
