直接用gap替代margin控制卡片间距最可靠，因gap专为grid/flex设计，自动避开容器边界、不破坏响应式，且避免阴影重叠；需确保父容器为display: grid或flex，并注意旧版Safari兼容性。
直接用 gap，别碰 margin ——这是目前最稳、最省事的解法，前提是父容器是 display: flex 或 display: grid，且目标浏览器支持（iOS Safari 14.5+、Chrome 89+、Firefox 63+）。
为什么 gap 在移动端卡片列表里比 margin 更可靠
换行时，margin-right 会在最后一行右侧留下空白，margin-bottom 在最后一行下方多出空隙；而 gap 天然只作用于项目之间，不碰容器边缘。卡片带 box-shadow 时，gap 还能避免阴影重叠，margin 容易造成视觉粘连。
- 横向间距统一写
gap: 1rem，纵向单独控制更安全：row-gap: 1.5rem - 单位优先用
rem（如gap: 1rem），避免缩放失准；vw适合全屏布局但小屏下容易过小 - 别写
column-gap——它在flex容器里压根不生效，DevTools 会标灰显示 “not applicable”
gap 不生效？先查这三件事
写了 gap: 12px 却没看到效果，大概率不是代码写错，而是底层条件没满足：
- 父容器必须是
display: flex（不是inline-flex，除非你真需要内联行为）或display: grid - 确认浏览器版本：iOS Safari ≤14.1、Android 旧 WebView、IE 等不支持
gap在flex上生效 - 别混用
gap和margin控制同一方向间距——比如既设gap: 16px又给子项加margin-right: 8px，会导致实际间距翻倍或错位
老浏览器兼容回退怎么写才不踩坑
光靠 @supports (gap: 0) 包裹降级不可靠——部分老 Safari 会错误返回 true，但实际不渲染 gap。
立即学习“前端免费学习笔记（深入）”；
- 稳妥写法：先写
gap: 12px，再用@supports not (gap: 0) { ... }降级 - 回退用
margin时，别依赖:last-child——Flex 换行后它失效；改用相邻兄弟选择器：.card + .card { margin-left: 12px; } - 若卡片垂直排列，用负边距抵消末尾空隙：
.card-list { margin-bottom: -12px; }，同时子项设margin-bottom: 12px
真正容易被忽略的细节
当卡片高度不一致时，row-gap 照常生效，但 align-content 会因每行基线不同显得错位——这不是 gap 的问题，而是 Flex 对齐逻辑本身的限制。这时别硬调 align-content，优先统一子项高度，或直接切到 display: grid 布局。
