直接用gap替代margin是解决卡片间距不统一最干净可靠的方式，因gap是容器级属性，只作用于相邻子项间、不触发外边距合并、不产生首尾空白，且在换行和响应式下自动保持行列间距一致。
直接用 gap，别碰 margin —— 这是解决卡片间距不统一最干净、最可靠的方式。其他方案要么要反复计算、清空、覆盖，要么在换行或响应式时自动失效。
为什么 margin 在卡片列表里总是出问题
手动给每张卡片加 margin-right 和 margin-bottom，看起来能控制间距，但实际会触发外边距合并、首尾多留白、换行后垂直对齐错位等问题：
-
:last-child清除右/下边距，只对单行有效；多行时最后一行末尾仍多出空白 - 不同高度的卡片在
flex-wrap下，margin-bottom无法保证行间一致 -
inline-block受 HTML 空格影响，间隙不可控 - 浮动布局中，
clear和overflow清除逻辑容易漏掉，导致父容器塌陷
Grid 布局下 gap 的正确写法
Grid 是二维布局，gap 天然适配行列间距，且不会在容器边缘产生额外空白：
推荐模板：
立即学习“前端免费学习笔记（深入）”；
.card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
关键点：
- 用
auto-fit而非auto-fill：避免空列占位，让卡片真正“填满可用宽度” -
minmax(280px, 1fr)中的280px是最小列宽，不是固定值，小屏下自动减少列数 -
gap: 20px同时控制横向与纵向间距；如需差异，可写gap: 20px 12px（行距 20px，列距 12px） - 卡片自身不要设
margin，否则和gap叠加，视觉变挤
Flex 布局下 gap 能不能用
可以，但要注意兼容性和行为限制：
- 现代浏览器（Chrome 84+、Firefox 63+、Safari 14.1+）原生支持
gap在flex容器中生效 - 旧版 Safari 需加前缀：
-webkit-gap，但多数新项目已无需降级 -
gap在flex-direction: row时只管水平间距，在column时只管垂直间距 - 若需独立控制，用
row-gap和column-gap更稳妥 - 必须开启
flex-wrap: wrap，否则gap只在单行内起作用
示例：
.card-flex {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
gap 不生效？先查这三件事
遇到 gap 没反应，不是语法错，大概率是结构或继承问题：
- 父容器的
display值是否被覆盖？比如被后代样式设成了display: block !important - 卡片是不是被套了多余 wrapper？例如每张卡外层多了个
<div class="card-wrapper">，导致卡片不再是grid或flex的直接子元素 - 卡片是否由伪元素（
::before/::after）生成？伪元素不参与gap计算
真正复杂的卡片流式布局，一旦开始混用 gap、margin、padding 手动调，就等于主动放弃布局一致性 —— 尤其当卡片内容高度不一、图片尺寸各异、文字行数浮动时，gap 是唯一能守住“间距恒定”底线的属性。
