grid-row-gap仅控制相邻行轨道间间距，不作用于容器首行顶边和末行底边；需配合padding或align-content实现上下视觉等距。
grid-row-gap 只控制行与行之间的间距，不控制首行顶边和末行底边
很多人以为 grid-row-gap 能让所有网格项“上下间距一致”，结果发现第一行顶部、最后一行底部没空隙，视觉上明显不居中或不对称。这是因为 grid-row-gap 仅作用于相邻两行轨道之间（即第1行和第2行之间、第2行和第3行之间……），不会自动给容器内边距补白。
真正让上下视觉间距一致的常用组合方案
要实现“每个网格项上下看起来等距”，核心是让容器顶部到第一行、每两行之间、最后一行到底部这三段距离相等。常见做法是用 padding 配合 grid-row-gap：
- 设容器
padding-top和padding-bottom等于你想要的单倍间距值 - 设
grid-row-gap也等于该值 - 确保网格项自身没有额外 margin 或 border 干扰计算
/* 示例：期望每项上下视觉间距都是 20px */
.container {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(80px, 1fr));
grid-row-gap: 20px;
padding: 20px 0; /* top + bottom 各 20px */
}
用 align-content: center 配合 gap 更适合动态行数
当网格行数不确定（比如响应式增减），硬写 padding 容易在行数少时显得顶部/底部太空。这时可改用 align-content 控制整体内容块在容器中的分布：
-
align-content: center把所有行当作一个整体居中，配合grid-row-gap，能自然拉出上下对称空白 - 注意：该属性只在多行（即
grid-template-rows生成多个轨道）且容器有剩余高度时生效 - 如果容器高度被内容撑满，
align-content就不起作用
.container {
display: grid;
grid-template-rows: repeat(3, 100px); /* 至少两行才有效 */
grid-row-gap: 16px;
height: 400px; /* 必须有明确高度或 min-height，否则无剩余空间 */
align-content: center;
}
别忽略 grid-auto-rows 和隐式行的 gap 行为
如果你用的是 grid-template-rows: 100px; 这类固定定义，但实际子元素超出预设行数，新生成的隐式行（implicit rows）依然会受 grid-row-gap 影响——这点常被忽略，导致调试时发现“后面几行间距变大了”。确认是否真需要隐式行：
- 检查是否误用了
grid-auto-rows设置了不同尺寸 - 若希望所有行（包括隐式行）都统一 gap，就别覆盖
grid-row-gap，它默认全局生效 - 错误示例：
grid-row-gap: 12px写在子元素上——无效，gap 是容器属性，不能写在 item 上
实际项目里最容易漏掉的是容器高度约束和 padding 的协同。gap 不是万能胶，它只管“缝”，不负责“边框”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
