网格项重叠主因有三：未配对指定grid-column/grid-row起止线致默认跨度为1；子项未设position导致z-index无效；隐式轨道自动创建且尺寸不可控。
grid-column 和 grid-row 必须成对指定起止线，不能只写起点
CSS Grid 中网格项重叠，最常见原因是只写了 grid-column-start 或 grid-row-start，却没配对设置终点。浏览器会默认终点为起点 + 1，但若多个项恰好落在同一格子且没显式声明跨度，就会视觉重叠。
- 显式写全
grid-column: 2 / 4，比grid-column-start: 2更可靠 - 使用简写时，
/左右都必须是有效轨道线号（或span n） - 若用命名线（如
grid-column: sidebar / main），确保对应名称在grid-template-columns中已定义
示例：两个项都设 grid-column: 2，实际等价于 2 / 3，必然重叠；改成 grid-column: 2 / 3 和 grid-column: 3 / 4 就错开了
z-index 在 grid 容器内不生效？检查是否遗漏 position
Grid 项默认是 position: static，此时 z-index 完全无效——哪怕你写了也没用。这不是 Grid 的 bug，而是 CSS 层叠规则本身的要求。
- 只有定位元素（
position为relative、absolute、fixed或sticky）才参与z-index排序 - 在 Grid 布局中，通常只需加
position: relative即可激活z-index - 注意：父容器不需要
position: relative来“开启”子项的 z-index，只要子项自己定位就行
错误写法：div { z-index: 10; } → 无效果
正确写法：div { position: relative; z-index: 10; }
立即学习“前端免费学习笔记（深入）”；
隐式网格轨道导致项“消失”或错位，本质是行/列溢出
当网格项的 grid-row 或 grid-column 指向了未定义的轨道线（比如 grid-row: 10 但只定义了 3 行），浏览器会自动创建隐式轨道。这些轨道默认高度/宽度为 auto，可能塌陷或撑开，造成项看似重叠、错位甚至不可见。
- 查看开发者工具的 Layout 面板，确认是否出现「implicit grid track」
- 用
grid-auto-rows和grid-auto-columns显式控制隐式轨道尺寸，例如grid-auto-rows: 1fr - 更稳妥的做法是提前规划好最大行列数，用
grid-template-rows和grid-template-columns覆盖所有可能用到的线
常见现象：最后一行内容挤在顶部，或某个 grid-row: 5 的项根本看不到——大概率是第 5 行被隐式创建且高度为 0
重叠还可能是 gap 和 justify-content/align-content 冲突
gap 是网格项之间的间距，但它只作用于显式网格轨道之间；而 justify-content 和 align-content 控制的是整个网格容器内所有轨道（含隐式）的对齐方式。如果轨道总尺寸远小于容器，又用了 center 对齐，项就会被“挤”到中间区域，看起来像重叠。
- 检查
grid-template-rows是否过度使用auto或min-content，导致轨道高度不可控 - 若需居中但避免挤压，优先用
place-items: center（作用于单个项），而非容器级对齐 -
gap不影响项自身尺寸，但会改变可用空间，间接影响fr单位的分配结果
小技巧：临时把 gap 设为 20px 并加背景色，能快速暴露布局“空隙”是否被意外压缩
网格项重叠往往不是单一原因，而是轨道定义、定位属性、隐式行为三者叠加的结果。最容易被忽略的是：你以为写的是位置，其实浏览器按轨道线编号在算空间；你以为没动 z-index，其实它根本没启动。
