row-gap 仅控制行间间距且值统一，首尾空隙由 align-content 或 padding 控制；容器定高时用 space-evenly 可实现上下与行间等距，不定高时宜用 padding 模拟首尾间隙。

row-gap 只能设统一值，所谓“不均匀”往往不是它的问题，而是 align-content 或容器高度没配对。

row-gap 本身不会导致行间距不均匀

只要写了 row-gap: 16px，所有相邻行轨道之间就一定是 16px——第1–2行、第2–3行、第3–4行……全部相等。如果你看到“上面空得少、下面空得多”，那不是 row-gap 失效，而是首行顶边和末行底边到容器边缘的距离没被它控制。

• row-gap 只作用于“行与行之间”，不负责容器顶部/底部留白
• 首尾空隙由 align-content 决定（默认是 stretch，会把行拉满，看起来像没空隙）
• 如果容器高度不确定（比如靠内容撑开），space-evenly 会退化为 flex-start 行为

想让上下+行间视觉一致，优先用 space-evenly + 定高容器

这是最接近“均匀分布”的原生方案，但有硬性前提：容器必须有明确高度，否则无法均分空间。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 设置 height: 400px 或 min-height: 300px 等可计算高度
• 写 align-content: space-evenly，它会把总可用空间切成（行数 + 1）份
• 再配 row-gap: 16px，此时顶部、行间、底部的间隙都刚好是 16px
• 注意：如果行数动态变化（比如 JS 插入新项），这个均分逻辑会自动重算，无需改 CSS

容器高度不固定时，用 padding 模拟首尾间隙

当内容长度不可控（如文章列表、评论流），别硬套 space-evenly，改用更鲁棒的组合：

• 给 grid 容器加 padding-top: 16px 和 padding-bottom: 16px
• align-content: flex-start（让所有行从 padding 下沿开始排）
• 保持 row-gap: 16px，这样顶部 padding = 首行上方空隙，row-gap = 行间空隙，最后一行自然停在底部 padding 上沿
• 避免用 margin-top 给第一个子项加空隙——它会被 row-gap 叠加，变成双倍

需要某两行之间特别宽或特别窄？别碰 row-gap

row-gap 不支持多值语法（row-gap: 16px 4px 是非法的，浏览器直接忽略整条声明）。真要差异化，得换思路：

• 用 grid-template-rows 插入空轨道：比如 auto 16px auto 4px auto，再配合 grid-row 显式定位每个 item
• 交互场景（如 hover 后收缩某处间隙）慎用空轨道——切换 grid-template-rows 会触发重排，且难以调试
• 更实用的做法：给每个 item 包一层 <div>，用子容器的 <code>margin-bottom 控制下间距；或用 ::after 在特定 item 后插入固定高度占位块
• 绝对不要用 transform: translateY() 模拟间隙——它脱离文档流，后续元素位置会错乱

真正容易被忽略的是：gap 类属性只在有“至少两行轨道”时才生效。如果 grid 容器里只有一行内容（哪怕写了 grid-auto-rows: 100px），row-gap 就完全不可见——这不是 bug，是规范行为。