row-gap 只能设置统一值，无法为不同行指定不同间隙；可通过 grid-template-rows 插入空轨道（如 auto 16px auto 4px auto）配合 grid-row 显式定位实现差异化行间距。
row-gap 只能设统一值，不能指定某一行的间隙
row-gap 是作用于整个网格容器的单值属性，它控制的是所有相邻行轨道之间的**统一间距**。你无法用 row-gap: 12px 4px 8px 这种多值写法来逐行定义——浏览器会直接忽略整条声明，在 DevTools 的 Styles 面板里显示为 strike-through 灰色。这不是兼容性问题，而是语法本身不合法：CSS 规范只允许 row-gap 接收一个长度值（如 12px、1rem），最多支持双值的 gap（gap: 12px 8px 表示行距 12px、列距 8px）。
想让第1行和第2行之间是16px，第2行和第3行之间是4px？用 grid-template-rows 插入空轨道
真正可行的方案是把“间隙”当作不可见的行轨道来设计。比如原本三行内容，扩展成五行轨道：auto 16px auto 4px auto，其中中间两个是固定高度的空轨道：
.container {
display: grid;
grid-template-rows: auto 16px auto 4px auto;
}
.item1 { grid-row: 1; }
.item2 { grid-row: 3; }
.item3 { grid-row: 5; }
这样第1项和第2项之间就自然隔开了 16px，第2项和第3项之间是 4px。注意必须配合 grid-row 显式定位，否则默认流式布局会把所有项塞进第一行。
需要动态响应 hover 或状态变化？别硬编码轨道，改用嵌套容器或伪元素
如果间隙要随交互变化（比如 hover 后某两行贴得更近），靠 grid-template-rows 切换值会触发重排，且难以维护。更实际的做法是：
- 给每个网格项包一层 ，用子容器的
margin-bottom控制下间距- 用
::after在特定项后插入占位块，并设height- 避免用
transform: translateY()模拟间隙——它脱离文档流，后续元素会错位这类方式牺牲一点语义性，但可读性和可调试性远高于拼凑复杂轨道声明。
容易被忽略的关键点：gap 不影响首行上方和末行下方
row-gap（或gap）只作用于**相邻轨道之间**，不会在容器顶部加空隙，也不会在底部多留白。如果你发现“第一行紧贴容器上边”，不是row-gap失效，而是它本就不负责这个位置。需要顶部留白，应该用容器自身的padding-top；需要整体居中，用align-content配合足够高的容器高度。 - 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
