gap是Grid容器原生控制轨道间空白的机制，不参与子项尺寸计算、不触发重排、不与margin合并，因此天然规避首尾边缘溢出、响应式塌陷及边框叠加等视觉重叠问题。
gap 是 Grid 容器原生控制轨道间空白的机制，它不参与子项尺寸计算、不触发重排、不与 margin 合并，因此能天然规避首尾行/列边缘溢出、响应式塌陷、边框叠加等由 margin 引发的视觉重叠问题。
Grid 中用 margin 导致容器边缘多出空白的根本原因
给每个 .item 设 margin: 1rem，实际会在第一行顶部、最后一行底部、第一列左侧、最后一列右侧各“额外”多出 1rem 空白——因为 margin 是子项自身的盒模型行为，而 Grid 容器不会为这些 margin 预留空间或裁剪。这导致：
- 小屏下容易触发横向滚动条（尤其配合
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))） - 最后一行右边缘超出容器边界，视觉上像“错位”
- 若子项有
border，外侧 border 会完整显示，内侧则因相邻 margin 叠加变粗
gap 如何从机制上避免边缘重叠
gap 不是往子项上“加空”，而是在网格线之间“挖空”。它只作用于轨道（track）之间，不延伸到容器边界外侧：
- 第一行上方、最后一行下方、第一列左方、最后一列右方，**没有轨道间隙**，所以 gap 自然不生效
- 子项尺寸完全由
grid-template-*或fr决定，gap不改变它们的width/height - 即使子项设了
align-self: start，gap 间距仍稳定存在，不受对齐行为干扰
响应式换行时 gap 为什么不会乱套
当使用 auto-fit 或 auto-fill 动态调整列数时，gap 始终绑定在当前生成的轨道结构上：
- 3 列 → 2 列 → 1 列，gap 值不变，但列间间隙数量自动减少（比如从 2 处 column-gap 变为 0 处）
- 而用
margin-right+:not(:last-child)的写法，在换行后选择器失效，末项可能残留 margin -
gap不依赖子项数量或位置判断，语义上就是“轨道之间该有多宽”，逻辑更干净
兼容性与降级时最容易被忽略的细节
Safari 14.0 及更早版本不支持 gap: 12px 8px 这类双值语法，但支持分开写的 row-gap 和 column-gap；Edge 16–18 虽标称支持 gap，实测存在行高塌陷。稳妥做法是：
- 始终同时声明：
row-gap: 12px; column-gap: 12px;（而非只写gap） - 避免在同一个规则里混用
gap和row-gap/column-gap，CSS 层叠可能覆盖预期 - IE 全系不支持，如需兼容，不能只靠
@supports (gap: 1rem)，得搭配 JS 检测或服务端 UA 判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
