gap 必须配合 display: flex 或 grid 才生效；其为轨道级间距，不与 margin 合并、不作用于容器边缘，且 row-gap 在前、column-gap 在后，Safari 旧版需 flex-wrap: wrap 兼容。
gap 不能直接用在普通 <div> 上，必须配合 display: flex 或 display: grid 才生效；写 gap: 20px 却没效果？八成是父容器没设对布局模式。
为什么卡片用 display: grid + gap 比 margin 更稳
Grid 的 gap 是轨道级控制，只插在列与列、行与行之间，不碰首尾边缘，也不和子项的 margin 合并——这避免了外边距合并（margin collapse）导致的间距跳变。而靠 margin-right + margin-bottom 控制卡片间距时，最后一行卡片的 margin-bottom 会撑开容器，右侧末尾项的 margin-right 还得用 :last-child 清除，维护成本高。
-
gap自动跳过容器边缘，视觉上更干净 - 响应式切换列数时（比如从 3 列 → 1 列），
gap仍只作用于实际存在的行列间隙，不会残留“空隙” - 调试时在 DevTools 的 Computed 面板里一眼能看出是
gap还是子项margin在起作用
gap: 12px 24px 的顺序不能反着写
双值写法中，第一个值永远是 row-gap（行间距），第二个是 column-gap（列间距），和 margin 的“上右下左”无关。写成 gap: 24px 12px 就是行距 24px、列距 12px，不是“左右变小上下变大”。
- 常见误操作：想“只留横向间隙”，写
gap: 0 16px—— 这会让行间距为 0，相邻两行卡片贴在一起 - Grid 中不支持百分比
gap（如gap: 5%无效），但rem、px、em都可以 - 如果同时写了
gap: 12px和column-gap: 20px，后者会被覆盖，gap优先级更高
Safari 14.1–15.6 下 gap 不生效？加 flex-wrap: wrap
旧版 Safari 对单行 Flex（flex-wrap: nowrap）下的 gap 支持不全，即使你只想让卡片横排一行，也得显式写 flex-wrap: wrap，否则 gap 直接失效。
立即学习“前端免费学习笔记（深入）”；
- 解决方案：给 Flex 容器加
flex-wrap: wrap，再用min-width: 0或flex: 0 0 auto防止子项换行 - 或者改用
row-gap/column-gap单独声明——它们在 Safari 中兼容性更稳 - Grid 布局不受此限制，
display: grid+gap在 Safari 14.1+ 全部可用
卡片边缘贴边？那是没加 padding
gap 只管子项之间的空隙，不管子项离容器边框有多远。如果你发现最左/最上卡片紧贴容器边缘，不是 gap 失效，而是容器本身缺少内边距。
- 正确做法：给 Grid/Flex 容器加
padding，例如padding: 16px - 别试图用
gap模拟边缘留白——它天生不负责这事 - 若用 CSS 自定义属性统一管理，可设
--card-gap: 16px和--card-padding: 16px，分别控制间隙与边缘距离
真正容易被忽略的是：Grid 中 gap 会参与总宽度计算。比如 grid-template-columns: repeat(3, 1fr) + gap: 20px，浏览器先分三等份，再在两列之间插入 20px，总共多出两个 20px 的空隙——这个细节在做精确尺寸控制时经常翻车。
