grid gap仅控制网格项间间隙，不影响容器边缘；需额外设置padding实现边缘留白，不可用margin替代。
grid gap 设置间距时，为什么子元素边缘没留白？
因为 grid-gap（或现代写法 gap）只控制网格项之间的间隙，不作用于网格容器边界。也就是说，第一行/列和容器上/左边缘、最后一行/列和下/右边缘之间默认是紧贴的。
常见误操作是以为设了 gap: 16px 就自动带“内边距效果”，结果发现布局贴边难看。
- 正确做法：给容器加
padding，值通常等于gap的一半或直接匹配（如gap: 16px→padding: 16px） - 注意：不要用
margin替代padding，否则可能破坏网格对齐或触发外边距合并 -
gap在 Grid 中支持row-gap/column-gap独立设置，但别和padding混用逻辑——前者管“项间”，后者管“容器与内容间”
flex gap 在旧浏览器里直接不生效怎么办？
gap 属性在 Flex 布局中属于较新特性，Chrome 104+、Firefox 103+、Safari 14.1+ 才完整支持；IE 完全不支持，早期 Edge（
如果项目需兼容到 Chrome 90 或更低版本，不能只靠 gap。
立即学习“前端免费学习笔记（深入）”；
- 降级方案：用
margin模拟，例如给每个flex-item加margin-right: 12px，再用:last-child { margin-right: 0 } - 避免用
margin-left+:first-child，容易在换行时出错（Flex wrap 下第一项未必在首列） - 若用 CSS-in-JS 或 PostCSS，可配
postcss-gap-properties插件自动补margin回退，但需确认它不污染 Grid 的gap
grid gap 和 flex gap 的数值单位和计算逻辑一样吗？
语法层面完全一致：gap 都接受 length（如 12px、1em）、percentage（仅对 Grid 有效，Flex 中百分比会被忽略）、以及两个值形式（gap: 10px 20px 表示 row-gap column-gap）。
但关键差异在百分比行为：
- Grid 中：
gap: 5%相对于网格容器的内联尺寸（inline-size），即宽度方向，且会参与网格线计算 - Flex 中：
gap: 5%会被当作无效值处理，回退到默认0，必须用固定单位 - 性能提示：用
em或rem时，Grid 的gap会随字体变化重排，Flex 则无此问题（但实际影响极小）
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px; /* 仅项间 */
padding: 16px; /* 补容器边缘 */
}
.flex-container {
display: flex;
gap: 12px; / Chrome 104+ 可用 /
}
.flex-container > :not(:last-child) {
margin-right: 12px; / 降级 fallback */
}
实际项目中，Grid 的 gap + padding 组合更可控；Flex 的 gap 要时刻盯着兼容性表，尤其当团队还在维护老版本安卓 WebView 时。
