row-gap 和 column-gap 分别独立控制行间距与列间距，互不影响；row-gap: 16px 即可只设行距且列距保持默认 0，无需声明 column-gap: 0；column-gap 插入额外空白，不压缩列宽但增加总宽度。
row-gap 和 column-gap 的作用完全独立
这两个属性分别控制行与行之间、列与列之间的间距，互不干扰。设置 row-gap 不会改变列宽或列间距，同理 column-gap 也不会影响行高或行间距。它们只是在网格轨道（track）之间插入空白，不侵占任何单元格内容区域，也不触发重排（reflow）以外的布局计算。
常见错误是误以为设置了 row-gap: 20px 后，所有行高自动增加 —— 实际上它只在相邻行轨道间加空隙，行本身高度仍由 grid-template-rows 或内容决定。
如何只设行间距、保持列间距为 0
只需声明 row-gap，不写 column-gap 即可。CSS Grid 默认值就是 column-gap: 0，无需显式覆盖。
- 正确写法：
display: grid; row-gap: 16px; - 错误写法：
column-gap: 0—— 多余，且可能掩盖后续继承或层叠问题 - 若父容器已全局设了
gap: 12px（等价于同时设 row/column），需单独重置：row-gap: 16px; column-gap: 0;
column-gap 设为非零时，为什么列宽没变但总宽度超出了预期
因为 column-gap 插入的是“额外空间”，它不压缩列轨道，而是直接加在列之间。例如 3 列各 1fr + column-gap: 20px，实际占用宽度 = 3 ×（可用宽 ÷ 3）+ 2 × 20px。
容易踩的坑：
- 用
width: 100%包裹 grid 容器时，gap可能导致水平滚动条出现 -
grid-template-columns: repeat(3, 1fr)在有column-gap时，每列实际占比 - Flexbox 中的
gap行为一致，但老版本浏览器不支持 —— Grid 的gap在 Safari 16.4+、Chrome 66+ 才稳定
gap 简写属性和分开写的优先级关系
gap 是 row-gap 和 column-gap 的简写，语法为 gap: 。当两者都出现时，分开写的属性会覆盖简写中对应的部分。
例如：
gap: 10px 20px; row-gap: 30px;
最终效果是 row-gap: 30px; column-gap: 20px; —— 因为 row-gap 显式声明优先级更高。
所以，如果项目中混用了 gap 和单独的 row-gap，务必检查层叠顺序，特别是通过 CSS-in-JS 或 utility class 注入样式时。
复杂点在于：gap 的行为在 subgrid 中尚未完全标准化，目前主流浏览器都不支持 subgrid 的 gap，这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
