网格错位主因是线号误算、box-sizing未统一、self属性覆盖容器设置及gap与margin混用；应正确编号网格线、全局设border-box、慎用justify-self/align-self、仅用gap控间距。
grid-column / grid-row 线号写错导致错位
写 grid-column: 1 / 3 却只占一列，或者元素突然“跳行”，大概率是网格线编号算错了。网格线从容器边缘开始编号：左起第1条垂直线是 1，往右依次是 2、3……所以 1 / 3 是跨两列（线1→线3），不是“第1列到第3列”。
- 用负数反向定位更安全：
grid-column: -2 / -1表示倒数第二条线到最右线 - 命名线比数字可靠：
grid-template-columns: [left] 1fr [main] 2fr [right]，然后写grid-column: left / main - 省略第二个值如
grid-row: 2等价于grid-row: 2 / auto，但若该行高度未定义，子项可能撑高或塌陷，破坏对齐
box-sizing 不统一让边框“凸出来”
给网格项加 border 后左右不对齐、间隙不均，根本原因不是 Grid 有问题，而是默认 box-sizing: content-box 让 border 额外增加尺寸，而网格轨道按内容区分配。
- 必须全局设：
* { box-sizing: border-box; }或至少.grid-container > * - 别只给部分子项设——漏一个就会“凸出来”
- 边框对齐本质是盒模型问题，不是语法问题；设对
box-sizing+ 用gap控制间距，95% 错位消失
justify-items / align-items 被子项 self 属性覆盖
容器写了 justify-items: center，但某个按钮还是靠左，不是属性失效，而是那个按钮自己写了 justify-self: start —— 它优先级更高，直接覆盖容器设置。
-
justify-items和align-items只作用于**没显式声明justify-self或align-self的子项** -
place-items: center是简写，但第一个值是align-items（垂直），第二个是justify-items（水平），顺序反直觉 - 单个元素要特殊对齐，别改容器，直接加
justify-self或align-self
gap 和 margin 混用导致间距翻倍
一边设了 gap: 12px，一边又给每个网格项写 margin: 6px，结果项间空隙变成 18px 甚至更乱——因为 gap 是轨道间距，margin 是子项自身外边距，两者不互斥，会叠加。
立即学习“前端免费学习笔记（深入）”；
- Grid 中一律用
gap控制项间距离，删掉所有子项的margin -
gap不支持百分比，也不受margin-collapse影响，更稳定 - 需要“带边框的分隔线”效果？用
gap: 2px+border: 1px solid #ccc，视觉上就是 1px 线
真正卡住人的从来不是语法记不住，而是盒模型没统一对齐、线号凭感觉写、self 属性和容器属性混着改——这些地方不动手调试一遍，光看文档永远觉得“明明写了却没效果”。
