gap仅作用于相邻轨道间，不支持单行/列差异化设置；需用多个grid容器实现不同间距；row-gap与column-gap可独立控制；gap失效常见于display非grid、子项display:none或容器过小；gap值参与空间分配计算，非纯视觉留白。
gap 只能统一控制轨道间距，不支持“某一行/某一列单独设 gap”
这是最容易误解的点：gap 作用对象是“相邻轨道之间”，不是“某两个具体子项之间”。它没有选择器能力，也不能按行号、列号差异化设置。比如设计稿要求“第一组卡片垂直间距 24px，第二组缩到 8px”，gap 本身做不到——这不是写法问题，是语义限制。
真正该做的，是把逻辑拆到 DOM 层级：用多个 .grid-section 容器分别包裹不同组，各自设 row-gap。强行在一个 grid 里用 JS 动态加 class 或伪元素模拟“局部 gap”，只会让布局失控、响应式断裂。
row-gap 和 column-gap 是唯一可独立控制的手段
如果你需要行距和列距不一致（比如移动端竖向紧凑、横向宽松），必须放弃单值 gap: 12px，改用分开声明：
-
row-gap: 8px控制行与行之间的空白 -
column-gap: 16px控制列与列之间的空白 - 二者互不影响，且现代浏览器（Chrome 66+ / Firefox 63+ / Safari 14.1+ / Edge 16+）全部原生支持
- 别混用：
gap: 10px后又写row-gap: 15px—— 后者会覆盖前者
gap 失效的三个高频原因
写了 gap 却没看到间距？先检查这三项：
- 父容器
display不是grid或inline-grid（比如误写成flex，或被display: contents破坏上下文） - 子项用了
display: none—— 它不参与 gap 计算；而visibility: hidden仍占位、受 gap 影响 - 容器高度太小，实际只渲染出一行，
row-gap自然“看不见”——加min-height: 200px验证是否真失效
gap 值会影响 track 尺寸分配，不是纯视觉留白
很多人以为 gap 就是“在 item 之间插空白”，其实它是从容器总可用空间里**先扣除 gap 区域**，再把剩余空间分给 tracks。这意味着：
-
grid-template-columns: 1fr 1fr; gap: 20px→ 两列宽度之和 = 容器宽 − 20px - 如果用
minmax(0, 1fr)这类弹性写法，gap 扣除后可能让 track 收缩到内容最小宽度，而非预期比例 -
gap值不能是auto或负数，单位支持px、rem、%（百分比基于容器 width 方向）
真正难的不是写出 row-gap，而是当设计师说“这个区域间隙要和标题行高一致”时，得立刻意识到：那应该用 rem 或 em，而不是硬写 24px —— 否则字体缩放时会脱节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
