grid-column 和 grid-row 基本写法为 start / end，支持数字线号、span n 或命名线；推荐显式命名线提升可维护性；拆分属性适用于局部覆盖或动态控制；需警惕隐式网格导致的布局异常。
grid-column 和 grid-row 的基本写法
这两个属性用来指定元素在网格中的起始和结束位置，不是“移动”元素，而是重新声明它占据哪几行/列。写法统一为 grid-column: start / end 或 grid-row: start / end，其中 start 和 end 是网格线编号（从 1 开始），也可以用 span n 表示跨占 n 条轨道。
常见错误是把 grid-column: 2 / 4 理解成“放在第 2 列”，其实它表示“从第 2 条竖线开始，到第 4 条竖线结束”，也就是占第 2、3 两列（列轨道）。
-
grid-column: 1 / -1表示从最左线到最右线，横跨全部列（含 gap） -
grid-row: 2 / span 2表示从第 2 行线开始，向下跨 2 行轨道（即占第 2、3 行） - 负值从末尾反向计数，
-1指最后一根网格线（不是最后一行/列内容）
用 line number 还是 name？命名线更安全
直接用数字容易出错，尤其当网格结构后续调整（比如加了一列）时，所有依赖数字的 grid-column 都可能错位。推荐在定义容器时用 grid-template-columns: [start] 1fr [content] 2fr [end] 显式命名线，子元素再用名字定位：
.item {
grid-column: content / end;
}
这样语义清晰，且改列宽不影响定位逻辑。注意命名必须用方括号包裹，且不能和 CSS 关键字冲突（如 auto、span）。
立即学习“前端免费学习笔记（深入）”；
- 命名线支持重复，比如
[sidebar] 200px [sidebar] 1fr，可让多个元素都对齐到同名线 - 未命名的线仍可用数字访问，但混合使用会降低可读性
- 浏览器 DevTools 的 Layout 面板里能直接看到线名和编号，调试时优先看命名线是否生效
grid-column-start / grid-column-end 这些拆分属性有必要用吗？
大多数时候不需要。直接写 grid-column: a / b 更简洁，也等价于分别设 grid-column-start: a 和 grid-column-end: b。但拆分写法在以下场景有用：
- 需要单独覆盖某一边，比如继承了
grid-column: 1 / 3，只想改结束线：grid-column-end: 4 - CSS 变量动态控制某一边：
grid-column-start: var(--col-start, 1) - 媒体查询中只调整某条边界，避免重复写整条
grid-column
注意：如果只设 grid-column-start 而不设 grid-column-end，元素默认只占 1 根轨道（即 end = start + 1），不是撑满剩余空间。
常见错位原因：隐式网格 vs 显式网格
当元素的 grid-row 或 grid-column 指向了未定义的网格线（比如容器只定义了 3 列，却写了 grid-column: 5），浏览器会自动创建隐式网格轨道，但这些轨道默认大小为 auto，可能导致高度/宽度不可控、内容溢出或布局塌陷。
- 显式声明
grid-auto-rows: 100px或grid-auto-columns: minmax(0, 1fr)控制隐式轨道尺寸 - 用
grid-auto-flow: dense允许元素回填空缺，但可能打乱视觉顺序，慎用 - 最稳妥的方式是提前规划好最大行列数，用
grid-template-rows/columns显式定义足够多的线
隐式网格不会出现在 DevTools 的“Grid Overlay”高亮中，只有显式定义的线才会显示，这点容易让人误判布局结构。
