row-gap 仅在 display: grid/inline-grid 下生效，子元素需未脱离文档流、无额外 margin、高度一致且对齐方式合理；若需内容边界等距，须结合 padding 或 margin 控制。
row-gap 设置固定值后子元素垂直间距不一致？先确认是否真用了 grid
很多人以为给容器加了 row-gap 就自动生效，结果发现子元素上下间距忽大忽小——大概率容器根本没启用 CSS Grid。row-gap 只在 display: grid 或 display: inline-grid 下起作用，对 flex、block 甚至 display: grid 但子元素被 position: absolute 脱离文档流的情况都无效。
- 检查浏览器开发者工具中该容器的 computed
display值，确认是grid - 确保子元素没有设置
margin，否则row-gap和 margin 会叠加，造成视觉不均 - 若子元素高度不一致（比如文字行数不同、图片尺寸不同），
row-gap虽然固定，但“视觉间距”可能因基线对齐或内容撑开而显得不一致
row-gap 生效但垂直间距仍不均匀？看对齐方式和内容高度
row-gap 控制的是网格轨道（grid track）之间的间距，不是子元素内容边缘之间的距离。如果子元素自身高度差异大，又用了默认的 align-items: stretch，拉伸行为会让某些项高度变高，从而让“空白感”变弱；而用 align-items: start 后，顶部对齐但底部参差，gap 看起来就“悬空”了。
- 统一子元素高度：加
min-height或height，或用align-items: flex-start（注意这是 grid 的 align-items，不是 flex 的） - 避免内容溢出影响视觉：设
overflow: hidden或line-clamp控制文本行数 - 检查是否有隐式网格线干扰：比如用
grid-template-rows: auto auto显式定义了两行，但实际子元素超过两行，后续行会按auto计算高度，导致 gap 看似不均
需要真正“内容底部到下一项顶部”等距？别只靠 row-gap
如果设计稿要求的是“每个子项的内容底部，到下一个子项的内容顶部”严格相等（比如卡片底部文字到下张卡片标题的距离恒为 24px），仅靠 row-gap 不够——它控制的是轨道间隙，不是内容边界。这时得组合使用：
- 给子元素统一
padding-bottom，再配合row-gap补足剩余间隙 - 或者改用
gap（同时控制 row 和 column），并把子元素设为display: flex; flex-direction: column，再用margin-bottom统一控制内容末尾间距（但需清空最后一项的 margin） - 更稳妥的做法：用
grid-auto-rows: minmax(min-content, max-content)配合row-gap，避免隐式行高度塌缩
兼容性与常见误写
row-gap 在现代浏览器中支持良好（Chrome 66+、Firefox 63+、Safari 16.4+），但旧版 Safari（grid-row-gap 回退。注意：grid-row-gap 是旧语法，已废弃，不要混用。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
row-gap: 20;（缺单位）→ 必须写row-gap: 20px或row-gap: 1rem - 错误写法：
row-gap: 20px 10px;（row-gap 不接受两个值）→ 那是gap的写法 - Flex 容器里写
row-gap无效，要用gap（Flex Layout 从 Chrome 85+ 支持gap）
/* 正确的 Grid 用法 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 24px;
column-gap: 16px;
}
/ 兼容旧 Safari 的写法（可选）/
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 24px;
grid-column-gap: 16px;
row-gap: 24px;
column-gap: 16px;
}
真正让垂直间距“看起来一致”，关键不在 row-gap 值设多大，而在子元素是否具备可预测的高度行为和对齐逻辑。gap 是骨架，内容才是血肉。
