grid-area冲突、grid-auto-flow:dense填坑、显式定位越界、内容撑出轨道是重叠四大主因；应检查拼写一致性、禁用dense、用具体线号定位、以minmax替代固定高度。
grid-area 冲突是重叠最常见原因
多个元素写了相同的 grid-area 名称，而 grid-template-areas 中该区域只占一个格子，后声明的元素就会“盖”在前一个上面——这不是 bug，是 CSS Grid 的明确行为：同区域内的项目按 HTML 顺序层叠，后出现者在上。
- 检查所有
grid-area值是否拼写一致（大小写、空格、点号.占位都算不同） - 用开发者工具的 Elements 面板直接看每个元素最终计算出的
grid-area值，比查源码更准 - 临时给每个区域加唯一后缀（如
header-v2）快速验证是否冲突
grid-auto-flow: dense 会主动“填坑”导致重叠
启用 grid-auto-flow: dense 后，Grid 会把小尺寸项目塞进前面留下的空隙里，但不会管那里是否已有其他项目——如果手动定位和自动填充混用，就可能让两个项目落到同一网格单元。
- 除非你明确需要“紧凑排列”且已控制所有项目的显式位置，否则不要开
dense - 默认的
grid-auto-flow: row更安全：它严格按源顺序逐行/列放置，不回填 - 开
dense时，务必配合grid-column/grid-row精确约束每一项范围
显式定位超出轨道边界引发视觉重叠
比如定义了 grid-template-rows: 100px 100px，却让某个元素用 grid-row: 1 / -1 跨越全部两行，而另一元素设为 grid-row: 2，它们在第二行就会重叠——因为前者已覆盖整行空间，后者又强行挤进去。
- 用
grid-row-start/grid-row-end时，终点值不能小于起点值（如2 / 1无效） - 避免用
-1这类模糊终点；改用具体线号（如2 / 3）或命名线（如main-start / main-end） - 在 DevTools 的 Layout 面板打开“Show grid line numbers”，直观查看每条线的实际位置
内容撑开导致溢出式重叠
网格轨道高度设得太死（如 grid-template-rows: 60px 60px），但某项内有长文本或图片，内容高度突破轨道限制，就会“顶穿”下一行，看起来像和下面的项重叠。
立即学习“前端免费学习笔记（深入）”；
- 优先用
minmax(min-content, 1fr)或minmax(0, 1fr)替代固定像素值 - 对不确定高度的项，加
overflow: hidden+text-overflow: ellipsis控制文字 - 禁用
white-space: nowrap（除非真需要单行），它会让文本拒绝换行，强行撑宽/撑高
重叠问题很少是 Grid “坏了”，绝大多数时候是定位意图和实际轨道分配没对齐。调试时先看 grid-area 和 grid-row/grid-column 的最终计算值，再确认内容有没有悄悄撑破边界——这两步能覆盖 90% 的真实场景。
