gap仅在Flex/Grid容器中对直系子元素生效，需确保display设置、避免flex-shrink干扰、处理Safari 14.0兼容性（改用row-gap/column-gap）、配合padding实现首尾留白，并优先通过容器拆分而非选择器hack满足差异化间距需求。
gap 不能直接“控制卡片间距”——它只在 Flex 或 Grid 容器上生效，且只管直系子元素之间的空隙。想靠 gap 实现整齐卡片流，必须同时满足布局条件、写法规范、兼容处理三件事。
gap 在卡片容器上不生效的常见原因
很多人加了 gap: 16px 却看不到效果，不是 CSS 写错，而是容器根本没进入“gap 可作用状态”：
- 父元素没设
display: flex或display: grid—— 普通div上写gap完全被忽略 - 用了
flex-wrap: wrap却没加，row-gap就不会触发（单行 Flex 中只有列方向有间隙） - 子项写了
flex-shrink: 0且内容过宽，把容器撑满，视觉上“压扁”了间隙 - 卡片内部用了
display: contents包裹，让子项脱离渲染树，gap失去作用对象 - 用
float或inline-block布局卡片——这些方式根本不支持gap
Safari 14.0 及更早版本 gap 失效怎么修
这不是 bug，是 Safari 14.0（对应 iOS 14.0–14.4）完全不解析 gap 简写，包括 gap: 16px 和 gap: 8px 16px。DevTools 的 Computed 面板里根本看不到该属性值，静默跳过。
正确做法是放弃 gap 简写，改用两个独立属性：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 等距场景：
row-gap: 16px; column-gap: 16px; - 非对称场景（如卡片列表垂直紧凑、水平宽松）：
row-gap: 8px; column-gap: 24px; - 只想要列间距（比如横向滚动导航栏）：
row-gap: 0; column-gap: 12px;
-webkit-gap 在 Safari 14.0 中也无效，别加前缀白费力气。
卡片首尾留白和响应式断点怎么配合 gap
gap 只管子项之间，不管容器边缘。移动端常见的“左右贴边、中间等距”需求，必须靠容器自身 padding 解决：
- 左右留白：
padding: 0 16px;（不是靠gap或子项margin） - 媒体查询中调整间距，优先改
row-gap/column-gap值，而不是切回margin—— 否则逻辑割裂、维护成本飙升 - 设计稿要求“第一组卡片 24px、第二组 8px”，别试图用
.group-1 > *:not(:last-child)加margin，直接拆成两个独立容器，各自设不同row-gap和column-gap
Grid 卡片布局中 gap 和 justify-items 的关系
用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 实现自适应网格时，gap 控制行列间距，但卡片对齐还受 justify-items 影响：
-
justify-items: stretch（默认）会让卡片撑满列宽，但如果高度不一，看起来参差 - 想让卡片底部对齐，得配合
align-items: end，或给卡片设固定高度 +overflow: hidden - 注意：如果卡片自己带
margin，会和gap叠加，造成意外留白；统一用gap管理间距，子项内清空margin
真正难的不是写对 gap，而是当设计提出差异化间距需求时，意识到它本质是容器级统一控制——这种时候，拆容器比 hack 选择器更可靠、更易维护。
