gap属性仅对display: grid或inline-grid容器生效，作用于相邻轨道间，不影响容器边缘；需设于容器而非子项，Flex中虽支持但行为不一致。
gap 属性只对 display: grid 容器生效
如果你写了 gap: 16px 却没看到任何间距，大概率是父容器没设 display: grid 或 display: inline-grid。这个属性不会作用于子元素、Flex 容器或普通块级元素——浏览器会静默忽略，DevTools 里也看不到报错。
常见误操作包括：
- 把
gap加在网格项（item）上，而不是网格容器（container） - 父元素用了
display: flex，却期望gap生效（虽然现代 Flex 也支持gap，但row-gap/column-gap行为不一致） - 在
display: subgrid容器上使用，而当前 Firefox 仍不完全支持该组合
gap、row-gap、column-gap 三者怎么配着用
gap 是简写，row-gap 和 column-gap 是独立控制通道。它们不是互斥关系，而是可叠加覆盖的：比如你写 gap: 12px，再单独写 row-gap: 0，结果就是列距 12px、行距 0。
实用搭配场景：
立即学习“前端免费学习笔记（深入）”；
- 卡片列表需要等宽列距但首尾行无顶部/底部空隙 →
gap: 8px 16px+padding-top: 16px和padding-bottom: 16px（因为gap不管容器边缘） - 表单字段组想让标签和输入框之间紧贴，但字段组之间留空 →
row-gap: 24px+column-gap: 0 - 响应式中列数变化频繁 → 用
gap: 12px统一控制，比分别写row-gap/column-gap更易维护
想给某两行之间设不同间距？别硬套 row-gap
row-gap 只接受单值，写成 row-gap: 16px 4px 会被整个忽略（DevTools 显示为 strike-through 灰色）。这不是兼容性问题，是语法非法。
真正可行的解法只有两种：
- 用
grid-template-rows插入空轨道：比如三行内容要实现「1–2 间 16px，2–3 间 4px」，就写grid-template-rows: auto 16px auto 4px auto，再配合grid-row显式定位每个项 - 放弃纯 Grid 轨道方案，改用语义更清晰的方式：给每个网格项包一层
<div>，用子容器的margin-bottom控制下间距；或用::after伪元素插入固定高度占位块
后者调试友好、支持 hover 动态变更，且不会因轨道声明复杂导致重排抖动。
gap 不影响容器边缘，这点常被忽略
gap（含 row-gap 和 column-gap）只作用于**相邻轨道之间**。它不会在容器顶部加空隙，也不会在最后一行下方多留白——所以如果你发现第一行紧贴容器上边框，不是 gap 失效，而是它本就不负责这个位置。
正确补救方式：
- 需要顶部/底部统一留白 → 在容器上加
padding-top/padding-bottom - 需要整体垂直居中 → 用
align-content: center，并确保容器高度足够（比如设min-height: 100vh） - 需要某一项单独远离其他项 → 用
justify-self或place-self微调位置，而不是靠 margin “挤”出来
