必须统一所有容器的 grid-template-columns 定义（如通过 css 变量），禁用 auto/minmax 等动态值，确保列数、顺序、单位一致；命名线、区域和嵌套 grid 均不跨容器生效，box-sizing 和 gap 须统一。
多个容器的grid-template-columns不一致导致对齐失效
不同容器各自定义 grid-template-columns，哪怕数值相同，浏览器也视为独立网格轨道，无法跨容器对齐。这不是bug，是CSS规范明确的行为——每个网格容器的轨道系统彼此隔离。
- 必须用显式、可复用的列定义：优先用
fr单位或固定值（如120px），避免auto或minmax(auto, 1fr)这类动态计算项 - 所有需对齐的容器统一从同一份CSS变量或类名继承列配置，例如定义
:root { --list-cols: 120px 1fr 80px; }，再让各容器用grid-template-columns: var(--list-cols); - 若列数不同（比如一个3列、一个4列），强行对齐会破坏语义；此时应放弃跨容器网格线同步，改用
display: contents把多个列表“压平”到同一父容器中布局
grid-line名称跨容器不共享
你给某容器的列起名叫 col-start，另一个容器里同名的 col-start 并不指向同一逻辑位置——命名空间仅限当前网格容器内部有效。
- 不能依赖
grid-column: col-start在不同容器间建立对齐锚点 - 若必须按语义命名，需配合CSS自定义属性 +
@property（仅支持现代浏览器）做间接同步，但实际项目中更稳妥的做法是放弃命名，直接用数字线号（如grid-column: 2）并确保所有容器列数与顺序严格一致 - 检查是否误用了
grid-area命名区域：区域名同样不具备跨容器效力，且一旦某容器没定义该区域，整个布局可能静默失效
嵌套grid容器破坏父级轨道对齐
当列表项内部又嵌了一个 display: grid 容器时，它的子元素不会自动“吸附”到外层网格线上；外层网格线对内层完全不可见。
- 嵌套grid本身不参与外层对齐计算，哪怕外层设置了
grid-template-columns，内层仍按自身定义重新划分轨道 - 如果目标是让内层某列和外层某列视觉对齐，唯一可靠方式是让内层显式复用外层的列宽，例如用
width: 120px或flex-basis配合display: flex替代内层grid - 慎用
subgrid：它确实能继承父网格线，但目前仅Chrome/Firefox支持，Safari仍无计划；且要求父容器必须是grid，且子容器需设grid-template-columns: subgrid，稍有错配就会退化为普通grid
content-box尺寸差异导致视觉偏移
即使网格轨道对齐了，padding、border、box-sizing 不一致也会让内容看起来错位——网格线对齐的是轨道边界，不是内容边缘。
立即学习“前端免费学习笔记（深入）”；
- 所有参与对齐的容器必须统一
box-sizing: border-box，否则padding会撑开实际占用空间 - 避免在网格项上设
margin：它会脱离网格轨道影响整体流式布局；改用gap控制间距，或用justify-self/align-self调整单个项目位置 - 字体、行高、内联元素基线等渲染细节也会造成像素级偏差，调试时用浏览器开发者工具的“网格叠加层”（Grid Overlay）比肉眼判断更可靠
