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