必须同时设置 grid-column 和 grid-row 才能实现二维跨越；仅设其一只能单向扩展，另一方向仍按自动流放置。
grid-column 和 grid-row 必须成对出现才能二维跨越
只写 grid-column 或只写 grid-row，元素只会单向扩展，另一方向仍按自动流放置——结果常是“跨了列但没跨行”，或反过来。真正实现多方向跨越，必须同时设置两个属性。
-
grid-column: 1 / 3+grid-row: 2 / 4→ 占第 1–2 列、第 2–3 行（共 2×2 个轨道） - 漏掉
grid-row，哪怕grid-column写得再准，该元素仍卡在默认行（通常是第 1 行） - 用
span也一样：grid-column: span 2和grid-row: span 3必须一起写，否则 span 只作用于指定方向
起止线编号错一位，跨区就偏移一格
Grid 的线从 1 开始编号，1 / 3 是跨前两列（线 1→2、2→3），不是“跨三列”。常见错误是把列数当线号：3 列布局只有 4 条线（1–4），写 grid-column: 1 / 4 才占满全部，写 1 / 5 就失效（线 5 不存在）。
- 显式定义列结构：
grid-template-columns: repeat(6, 1fr)→ 生成 7 条线（1–7），此时grid-column: 2 / -1安全且可读 - 负值更可靠：
-1指最右/最下那条线，-2指倒数第二条，不依赖总列数硬算 - 打开 Chrome DevTools → Elements → 右键网格容器 → “Show grid line numbers”，直接看线是否画出来
span 写法的起点不固定，容易被自动流带偏
grid-column: span 2 不等于“固定从第 1 列开始跨 2 列”，它会先找当前自动流中第一个可用的起始位置，再向右占 2 轨道——前面若有其他元素占位或设置了 order，起点就可能跳变。
- 想强制从第 3 列开始跨 2 列，必须写全：
grid-column: 3 / span 2（等价于3 / 5） - 单独写
span 2+order: 2，起点由排序后的位置决定，调试时很难预测 - 跨行同理：
grid-row: span 2可能落在隐式行里，高度不可控；加grid-auto-rows: minmax(60px, auto)才能约束
用 grid-area 一次写死四条线，避免漏配
分开写 grid-column 和 grid-row 容易漏掉某一项，导致元素回退到默认位置（比如只设了列跨度，行方向就塌缩成单行）。grid-area 把四值打包，语义清晰、不易出错。
立即学习“前端免费学习笔记（深入）”；
- 语法固定：
grid-area: row-start / column-start / row-end / column-end - 例如：
grid-area: 1 / 2 / 3 / 5→ 占第 1 行（线 1→3）、第 2–4 列（线 2→5） - 命名区域更直观：
grid-area: sidebar;前提是父容器已用grid-template-areas定义过"sidebar . ."这类字符串 - 注意：
grid-area是简写，会覆盖grid-row-start等独立属性，DevTools 里灰掉的属性不是无效，而是被简写覆盖了
span 或数字都只是碰运气。 
