gap只在display: grid或inline-grid容器上生效，需先确认父容器display值是否正确；若为flex、block、subgrid等则无效，且旧版Safari、Android WebView等不支持gap，须用row-gap/column-gap替代并确保列定义留出间隙空间。
gap 只在 display: grid 容器上生效
写了 gap: 20px 却没看到空隙？第一件事是检查父容器是否真的设了 display: grid 或 display: inline-grid。其他值如 flex、block、subgrid 都会让 gap 完全失效。
常见误操作包括：
- 把
gap写在display: flex的父容器上，而子元素才是 grid - 用了
float或inline-block模拟网格，然后硬加gap - 父容器加了
position: absolute，但没确认它是否仍保持grid渲染上下文
gap: 10px 20px 的顺序不能颠倒
gap 是简写，两个值时固定为「行间距在前，列间距在后」——不是「上下左右」，也不是「宽高」。写成 gap: 20px 10px 就是行距 20px、列距 10px，和直觉相反，容易配错。
这些写法等价：
立即学习“前端免费学习笔记（深入）”；
-
gap: 12px⇔row-gap: 12px; column-gap: 12px -
gap: 8px 16px⇔row-gap: 8px; column-gap: 16px -
gap: 1rem 0.5rem合法，但gap: 5%在 Grid 中无效（不支持百分比）
注意：gap 会覆盖同方向已声明的 row-gap 或 column-gap；反过来，单独设了 row-gap 并不会影响 gap 的列方向值。
为什么设置了 gap 却没看到间距？
不是语法问题，而是布局没真正形成多行或多列。gap 只在有「实际轨道分隔」时才显现：
-
grid-template-columns: 1fr→ 单列，column-gap不生效 - 只放一个 item，且没设
grid-auto-rows或grid-template-rows→ 无第二行，row-gap不可见 - 容器内容溢出但未触发换行（比如
grid-auto-flow: column但 items 不够填满列数）→ gap 可能被“压”在不可见区域
用开发者工具检查 computed 样式里的 row-gap 和 column-gap 是否被解析，比肉眼判断更可靠。
gap 和 margin 混用会叠加出意料之外的空隙
gap 是布局层间隙，margin 是 item 自身外边距，两者逻辑不同，混用极易失控：
- 给某个 grid item 加
margin-bottom: 10px，再设row-gap: 10px→ 实际垂直间隔变成 20px - 首项/末项用
:first-child去 margin，但响应式下列数变化时规则失效 - 配合
justify-items: center时，margin可能破坏对齐，gap不影响对齐逻辑
需要整体留白？用容器的 padding；需要内容内边距？用 item 的 padding；统一控制 item 间空隙？只用 gap。三者职责分明，别让 margin 越界。
最常被忽略的是：gap 不出现在容器边缘，也不影响轨道尺寸计算——它只是插在轨道之间的空白。想让它“看起来像 padding”，得手动加容器内边距，而不是指望 gap 自己延展。
