grid-column和grid-row必须配合显式定义的网格线使用，线号从1开始编号，负值倒数，gap不产生新线，span依赖自动放置起点，grid-area更可靠。
grid-column 和 grid-row 必须用数字线号，不能靠 guess
Grid 线号从 1 开始计数，不是 0；最左/最上是 1，最右/最下是 -1。比如 3 列网格有 4 条垂直线：1、2、3、4（或 -4、-3、-2、-1）。写 grid-column: 2 / 4 就是占第 2 到第 4 条线之间——即第 2、3 列。
常见错误是把 gap 当作线：gap 不产生线号，只加间距；线号只属于 track 边界。
调试建议：
- 给 grid 容器加
outline: 1px solid #000，肉眼对齐线位置 - Chrome DevTools → Styles 面板 → 点击
display: grid右侧蓝色图标 → 勾选 “Show line numbers” - 别信命名区域在绝对定位下的映射，先查线号再写值
绝对定位元素用 grid-column/row 只设锚点，不控制偏移
一旦元素设了 position: absolute，grid-column 和 grid-row 就不再决定布局占位，而只是设定 inset（top/left 等）的参考起点。
关键事实：
-
inset属性（如left: 20px）优先级永远高于网格线，写了就覆盖线号逻辑 -
grid-column: 2 / span 2在绝对定位中会失效甚至引发偏移，必须改用明确线号，如grid-column: 2 / 4 -
grid-area命名区域对position: absolute元素完全无效，浏览器直接忽略 - 父容器没设
position: relative，绝对定位元素会相对于 viewport 定位，和 grid 线毫无关系
top/left），要么纯 inset（把 grid-column 当注释用）。
跨行跨列定位要算清起止线，别依赖 span
span 在常规网格项中方便，但在需要精准锚定交点（比如“第三列起始线、第二行结束线”）时反而模糊。
例如想让角标钉在第 3 条列线与第 2 条行线交汇处：
- 错：用
grid-column: 3; grid-row: 2;—— 这只占一个单元格，不是“点” - 对：用
grid-column: 3 / 4; grid-row: 2 / 3;—— 锚定在两条线围出的交点区域，视觉上就是那个点 - 若需右侧自适应，可用负值：
grid-column: -2 / -1表示倒数第二列到最后一列
sidebar-start）可读性高，但最终仍要映射到数字线号调试；DevTools Grid 面板能帮你确认命名线对应哪条数字线。
动态插入元素必须显式指定 grid-row/column，不能靠自动放置
后端循环生成的列表项（如一堆 .red-box）和手动插入的特殊元素（如 .green-box）混排时，HTML 顺序 ≠ 视觉位置。Grid 自动放置会按 DOM 顺序填格子，结果 .green-box 往往跑到末尾。
解决方式只有显式定位：
- 给
.green-box直接写grid-column: 3 / 5; grid-row: 2 / 4; - 若列数动态变化，避免用固定数字，改用命名线 +
grid-template-areas配合，但注意命名区域只对常规子项有效 - 重叠时用
z-index控制层级，不要指望 grid 自动分层
立即学习“前端免费学习笔记（深入）”；
真正难的不是写对语法，而是意识到：Grid 线号是坐标系，不是占位符；绝对定位下它只提供起点，不参与渲染计算；任何想“靠命名区域自动对齐”的尝试，都会在 DevTools 里变成一个飞走的元素。
