如何通过设置css grid的row-gap和column-gap来仅调整行间距而不影响列间距？

本文共计767个文字，预计阅读时间需要4分钟。

这两个属性分别控制行与行之间、列与列之间的距离，互不影响。

设置 `row-gap` 不会改变列宽或列间距，同样，设置 `column-gap` 也不会影响行高或行间距。它们仅在网格（grid）布局中的轨道（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: <row-gap> [<column-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，这点常被忽略。