gap 是唯一推荐的间距设定方式，因其由布局引擎原生控制、避免外边距合并、自动跳过容器边界，而 margin 在换行缩放时易导致错位崩坏；需在 grid 或 flex 布局上下文中使用，并配合响应式值与规范卡片样式。
gap 是唯一推荐的间距设定方式，其他方案在现代响应式卡片列表中都会出问题。
为什么 gap 必须代替 margin
margin 在换行、缩放或动态插入卡片时会触发外边距合并（margin collapse），导致首尾多出空白、行尾错位、Grid 轨道宽度误算——尤其当卡片高度不一致或容器宽度临界变化时，视觉直接崩坏。gap 则由布局引擎原生控制，只作用于项目之间，自动跳过容器边界。
-
gap: 1.5rem同时生效于行与列，无需分别写row-gap和column-gap - 混用
gap: 1.5rem和.card { margin: 0.5rem }→ 实际间距变成2rem，且在小屏换行后不可预测 - 旧教程里用
:not(:last-child)清除末项 margin，现在纯属冗余；gap 已覆盖全部需求
gap 在 grid 和 flex 中的生效前提
gap 不是万能属性，它只在明确的布局上下文中起作用。纯 div 流式布局下 gap 完全无效。
- Grid 布局：必须设
display: grid，搭配grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))才能真正响应 - Flex 布局：必须同时设
display: flex和flex-wrap: wrap，否则gap被浏览器忽略 - 避免嵌套多层 flex 容器——外层设
gap，内层卡片自身绝不能设margin，否则叠加失控
响应式 gap 值怎么写才不翻车
固定像素值（如 gap: 16px）在手机上太宽、大屏上又显空洞；而 rem 会随根字体缩放，破坏网格节奏；% 在 Grid 中直接失效。
- 推荐写法：
gap: clamp(0.5rem, 2.5vw, 1.25rem)—— 小屏用最小值，大屏线性增长，超大屏封顶 - 更稳妥的降级方案：
gap: 1rem配合全局html { font-size: clamp(14px, 1.5vw, 16px); }，让所有 rem 单位同步响应 - Safari ≤14.1 不支持 flex gap，若必须兼容，改用
display: grid或临时降级为grid-column-gap/grid-row-gap
gap 不生效？先查这三件事
不是代码写错，而是布局前提或样式冲突被忽略。
- DevTools 中确认父容器的
display确实是grid或flex（不是block或inline-block） - 检查是否意外写了
column-gap或row-gap单独属性——它们优先级高于gap，可能干扰统一控制 - 卡片自身有没有
margin？哪怕只设了margin-bottom: 1rem，在flex-wrap换行时就会在行尾多出空白
真正难的不是写出那行 repeat(auto-fit, minmax())，而是所有卡片都得“守规矩”：不锁死高度、不绕过 box-sizing: border-box、图片包 overflow: hidden、文字用 -webkit-line-clamp 截断——这些细节不处理，gap 再准也救不了真实设备上的错位和溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
