Grid多行间距不一致主因是align-content与row-gap协同作用：row-gap仅控制行间固定间隙，首尾间距由align-content决定；统一间距应选space-evenly（需容器定高）或用padding+flex-start模拟。
Grid 多行间距不一致，通常不是“bug”，而是 align-content 的对齐行为和 row-gap 的作用机制共同导致的视觉错觉。关键在于：row-gap 只控制**行与行之间的固定间隙**，而行与容器边缘的距离，由 align-content 决定。
row-gap 本身是均匀的，问题出在“空余空间”的分配上
row-gap 确实会在每两行之间插入等宽空白（比如设为 20px，那么第1行和第2行之间、第2行和第3行之间都是 20px），但它**不控制第1行顶部到容器顶边、或最后一行底部到容器底边的距离**。这部分距离由 align-content 的值决定：
- stretch（默认）：各行高度被拉伸填满容器，row-gap 被“挤”在中间，首尾无额外空隙 → 看起来“上下没间距”
- flex-start / start：所有行贴顶部排列，row-gap 只出现在行间，底部留大片空白 → 看起来“下边空太多”
- center：整体内容块居中，首行顶边和末行底边到容器边缘距离相等，但这个距离 ≠ row-gap → 容器高、行数少时，首尾空隙远大于 row-gap
- space-between / space-around / space-evenly：空隙被主动分配，但规则不同（例如 space-between 不给首尾加空隙，space-evenly 则均分所有间隙，含首尾）
想要“上下+行间”都统一用相同间距，优先选 space-evenly
如果你希望：容器顶部到第1行、第1–2行之间、第2–3行之间、……、最后一行到底部，**所有相邻边界之间的距离完全相等**，那就别用 stretch 或 center，直接设：
grid-template-rows: repeat(3, auto); /* 或具体尺寸 */ align-content: space-evenly; row-gap: 20px;
此时 Grid 会把“总可用垂直空间”划分为 (行数 + 1) 份，每份 = 间距值（即你看到的上下和行间都刚好是 20px）。注意：这要求容器有明确高度（比如 height: 400px），否则没有“可用空间”可均分。
立即学习“前端免费学习笔记（深入）”；
不想依赖容器高度？用 padding 模拟“首尾间距”
如果容器高度不固定（如内容撑开），又希望视觉上首尾也有类似 row-gap 的呼吸感，可以放弃 align-content 控制首尾，改用 padding：
- 给 grid 容器设置
padding-top: 20px; padding-bottom: 20px; - 同时设
align-content: flex-start;（让行紧贴顶部 padding 下沿） - 保持
row-gap: 20px;
这样：顶部 padding = 第1行上方空隙，row-gap = 行间空隙，最后一行自然落在底部 padding 上沿 —— 视觉间距就一致了，且不依赖容器高度。
检查是否误用了 align-items 或 justify-content
有时“间距不一致”其实是行内项目自身对齐导致的错觉。比如：
-
align-items: start;会让每行内项目顶部对齐，但若项目高度不同，底部就会参差 → 看似行间距不一 -
justify-content: center;在单行 grid 中影响水平，但在多行中若配合不均等列宽，也可能干扰垂直节奏感
确保你调的是 align-content（控制行整体分布），而不是 align-items（控制单个项目在行内的垂直位置）。
