gap 是 CSS Grid 中控制网格轨道间间距的容器级属性，不作用于子项、不参与盒模型计算、不触发 margin 折叠，且在响应式与动态布局中更稳定可靠。
gap 属性在 CSS Grid 中不是 margin 的“升级版”，而是根本不同层级的控制机制——它不作用于子项，而作用于网格轨道之间。用错地方，反而会让间距翻倍、布局错位。
gap 不参与盒模型计算，margin 会撑宽/撑高容器
给 .item 设 margin: 16px，它的实际占用空间就多了 32px（左右）或 32px（上下），浏览器在 auto-fit 下可能因此少渲染一列；而 gap: 16px 只是在已有轨道之间“挖空”，子项的 width、height、border、padding 全都不受影响。
- 容器
scrollWidth/scrollHeight不因 gap 增加，但会因 margin 溢出触发横向滚动条 - 第一列左边缘严格对齐容器
padding-left，不会被“顶出去” - 子项设
outline或border时，gap 区域完全干净，无重叠假象
gap 不触发 margin 折叠，也不受 align-items 影响
在 Grid 中，margin-top 和 margin-bottom 面对 align-items: stretch 可能完全失效——Computed 面板里数值还在，但视觉上没撑开高度；而 row-gap 稳定插入在行轨道之间，跟子项有没有内容、有没有高度、是否拉伸全无关系。
- 换行后新行首尾项之间的垂直间距仍由
row-gap控制，不用写:first-child或:last-child -
grid-auto-flow: dense下自动填充的项，gap 同样生效；margin 则容易导致错位 - 无论
justify-content是center还是space-between，gap 都稳定存在
gap 与 margin 叠加而非覆盖，容易误判视觉效果
很多人清掉子项 margin 后发现间距变小了，就以为“gap 替代了 margin”；反过来，如果保留 .item { margin: 4px; } 又加 gap: 8px，实际视觉间距接近 16px（水平+垂直方向分别叠加），这不是 bug，是两者并存。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：先统一重置子项
margin: 0，再由容器用gap主导间距 - 若需图标紧贴文字右侧 4px 这类微调，属于子项内部布局，应保留在子项上，但不能承担主轴间距职责
-
@supports (gap: 1px)可用于渐进增强，但别在支持 gap 的浏览器里还同时写margin，否则调试时很难分辨哪段代码在起作用
gap 在响应式与动态增删场景下更鲁棒
用 margin-right: 1rem + :not(:last-child) 模拟列间距，本质是靠选择器“打补丁”；一旦 JS 动态插入新项、或媒体查询切换列数，这个补丁就容易失效。gap 是容器级声明，浏览器自动按当前轨道结构分配空白。
- 列数从 3 → 2 → 1，
column-gap值不变，但间隙数量自动减少（比如从 2 处变成 0 处） - 只需
@media (max-width: 768px) { .grid { gap: 8px; } }，无副作用 - 不需要 JS 监听 DOM 变化去补 class，也不依赖子项数量判断
真正难的不是写对 gap，而是当设计稿要求“第一组卡片 gap 24px、第二组缩到 8px”时，得立刻意识到：gap 本身不支持轨道级差异化——这时候该拆成两个容器，而不是硬调一个值。
