grid-row 和 grid-column 跨行跨列需依赖真实存在的网格线，线号不存在时声明静默失效而非报错；绝对定位（如 1/3）与相对跨度（如 span 2）机制不同，混用易出错；必须通过 grid-template-columns/rows 显式定义或依赖隐式生成确保线号存在，否则跨距无效。
直接写 grid-row 和 grid-column 就能跨，但线号不存在时整个声明静默失效——不是报错，而是像没写一样。
grid-column: 1 / 3 和 grid-column: span 2 不是等价写法
它们看起来都占两列，但定位机制相反，混用会出问题：
-
grid-column: 1 / 3是绝对定位：强制卡在第 1 条列线和第 3 条列线之间，不管前面有没有空位、其他元素怎么排 -
grid-column: span 2是相对跨度：由 Grid 自动分配起始位置（比如第 1 格），再向右占 2 格；如果该位置被占，它会找下一个可用格子再 span -
grid-column: 1 / span 2合法，表示“从第 1 列线开始，向右跨 2 列”，终点自动算为第 3 线 -
grid-column: span 2 / 4无效，整条声明被浏览器丢弃（DevTools 中显示删除线）
父容器没定义 grid-template-columns，跨列就静默失效
Grid 的线不是“写了就存在”，得靠显式定义或内容隐式生成。你写 grid-column: 2 / 5，但父容器只生成了 1–4 号列线，那第 5 条线根本不存在，声明直接被忽略。
- 必须先设
grid-template-columns: 1fr 1fr 1fr→ 生成 4 条列线（编号 1–4） - 用
repeat(6, 1fr)→ 生成 7 条线（1–7），别硬写1 / 99，改用2 / -1更可靠（-1指容器最右侧那条线，始终存在） - 打开 Chrome DevTools → Elements 面板 → 勾选 “Show grid overlay”，直接看线是否画出来
用 grid-area 一次写全行列起止更少出错
分开写 grid-column 和 grid-row 容易漏掉某一项，导致元素回退到默认位置：
-
grid-area: 1 / 2 / 3 / 5→ 行起 / 列起 / 行止 / 列止（四值顺序固定） - 只给两个值如
grid-area: 1 / 2，缺失的row-end和column-end会按规则补为auto，不如显式写全可控 - 命名区域如
grid-area: sidebar依赖父级grid-template-areas定义，拼错或未定义就静默失效，不如线号直接
隐式轨道尺寸不一致会导致跨行后内容突然变高
你写 grid-row: 1 / span 5，但容器只定义了 grid-template-rows: 100px 100px（仅 2 行），浏览器会自动生成第 3、4、5 条隐式行线，但它们尺寸是 auto（由内容撑开），不是 100px。
- 结果就是：视觉上某一块突然很高，或文字换行异常
- 统一隐式轨道尺寸：加
grid-auto-rows: 100px（行）或grid-auto-columns: 1fr（列） - 禁止隐式扩展（慎用）：设
grid-auto-rows: none，超出部分会被截断 - 调试时给容器加
outline: 1px solid #f00，再开 DevTools 的“显示网格线”，直接看线号是否符合预期
真正难的不是语法，而是理解线号是真实存在的物理线——它不因你写了就存在，得靠 grid-template-* 或浏览器隐式生成来支撑；一旦线号失效，跨行跨列就变成幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
