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 + 定高容器
这是最接近“均匀分布”的原生方案，但有硬性前提：容器必须有明确高度，否则无法均分空间。
- 设置
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>，用子容器的margin-bottom控制下间距；或用::after在特定 item 后插入固定高度占位块 - 绝对不要用
transform: translateY()模拟间隙——它脱离文档流，后续元素位置会错乱
真正容易被忽略的是：gap 类属性只在有“至少两行轨道”时才生效。如果 grid 容器里只有一行内容（哪怕写了 grid-auto-rows: 100px），row-gap 就完全不可见——这不是 bug，是规范行为。
