column-gap 和 row-gap 可独立设置且互不干扰，分别控制网格列间和行间间隙，仅适用于 Grid 和多列布局，现代浏览器支持良好但需注意 Safari 旧版本渲染异常。
column-gap 和 row-gap 的独立设置完全可行
两者互不干扰，可以分别指定不同数值，不需要用 gap 简写覆盖彼此。这是 Grid 布局中明确支持的分离控制方式。
直接设置 column-gap 和 row-gap 即可生效
只要容器是 display: grid 或 display: inline-grid，就能直接使用这两个属性。它们只作用于网格项之间的间隙，不影响外边距或内边距。
-
column-gap控制列与列之间的空白（水平方向） -
row-gap控制行与行之间的空白（垂直方向） - 单位支持
px、rem、%、em等，但%在 gap 中按容器内联尺寸计算，行为较特殊，建议优先用固定值或rem - 在 Flexbox 中没有对应属性，仅 Grid 和 Multi-column 布局支持
常见错误：误用 gap 简写覆盖已有设置
如果先写了 column-gap: 12px，再写 gap: 8px，后者会同时重置 row-gap 和 column-gap 为 8px —— 这是简写属性的覆盖逻辑，不是 bug。
避免方式：
- 只用
column-gap和row-gap分开设，彻底避开gap - 若必须用
gap，写成gap: 16px 24px（row-gap column-gap顺序），但注意这个语法在旧版 Safari 中需加-webkit-前缀 - 检查 DevTools 中被划掉的属性，确认是否被后续声明覆盖
兼容性与实际表现差异
现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+）对独立 column-gap/row-gap 支持良好。但 Safari 16.3 及更早版本对 row-gap 在某些嵌套 Grid 场景下存在渲染异常，比如子网格设置了 row-gap 但父容器未定义 grid-template-rows 时可能失效。
简单验证示例：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;
row-gap: 12px;
}
这个写法在绝大多数项目中可直接使用，无需降级方案。真正需要小心的是动态生成网格 + gap 的 JS 驱动场景，此时要确保 DOM 渲染完成后再读取 getComputedStyle 中的 rowGap 值 —— 它返回的是解析后带单位的字符串，比如 "12px"，不是数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
