gap 已取代 grid-gap，是 row-gap 和 column-gap 的简写，支持单值（统一行列间距）和双值（分别设行、列间距），且在现代 Grid 和多行 Flex 中均适用，语法更简洁、语义更清晰。
grid-gap 已被弃用，直接用 gap
grid-gap 是 CSS Grid 布局早期草案中的属性，在现代浏览器中已被 gap 完全取代。所有支持 Grid 的主流浏览器（Chrome 66+、Firefox 63+、Safari 14+、Edge 79+）都只推荐使用 gap。继续写 grid-gap 不会报错，但属于冗余写法，且无法触发某些新行为（如与 row-gap/column-gap 的级联逻辑）。
gap 同时控制行间距和列间距，语法更简洁
gap 是 row-gap 和 column-gap 的简写，接受一个或两个值：
- 单值（如
gap: 12px）：同时设置行间距和列间距为12px - 双值（如
gap: 12px 24px）：第一个是row-gap，第二个是column-gap
这比分别写 grid-row-gap 和 grid-column-gap 更直观，也避免了旧属性名带来的语义混淆。
/* 推荐：现代写法 */
.container {
display: grid;
gap: 1rem 2rem;
}
<p>/<em> 不推荐：过时写法，且不支持单值缩写 </em>/
.container {
display: grid;
grid-gap: 1rem 2rem; /<em> 虽然还能用，但已非标准 </em>/
}gap 在 Flexbox 中也能用（有限制）
从 Chrome 84 / Firefox 63 / Safari 14.1 开始，gap 也被扩展到了 Flexbox 布局中，但仅适用于 flex-direction: row 或 column 的**单行/单列**场景。多行 Flex（flex-wrap: wrap）下，gap 行为才完全等价于 Grid 中的含义。
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row; flex-wrap: nowrap→gap只影响元素间横向间距 -
flex-direction: column; flex-wrap: nowrap→gap只影响纵向间距 -
flex-wrap: wrap（无论方向）→gap同时生效于行与列，行为与 Grid 一致
注意：gap 在 Flex 中对 justify-content 或 align-items 无影响，它只是插入在 flex item 之间的空白，不参与对齐计算。
兼容性兜底时别混用 grid-gap 和 gap
如果必须支持极老浏览器（如 IE 或旧版 Android WebView），要注意：grid-gap 和 gap 并非简单别名关系。它们在解析优先级、继承行为和与 row-gap/column-gap 的交互上存在差异。
- 不要写
grid-gap: 10px; gap: 10px—— 后者会覆盖前者，但旧浏览器会忽略gap，导致无间距 - 真正需要兼容时，应单独使用
grid-gap并放弃gap，或借助 Autoprefixer（它会把gap编译为grid-gap+gap，但仅限 Grid 上下文） - 现代项目中，只要目标浏览器支持 Grid，就只写
gap，无需任何前缀或 fallback
最容易被忽略的一点：当父容器同时设置了 gap 和子项设置了 margin，两者不会合并或抵消——它们是独立存在的空白区域，可能造成意外的“双倍间距”。这时候得靠视觉调试确认实际布局效果。
