grid-row-gap只能设置统一行间距，无法单独指定某一行间隙；需用grid-template-rows插入空轨道模拟不同行间间隙，或通过嵌套容器、伪元素等细粒度手段实现动态控制。
grid-row-gap 不能单独设置某一行间隙
CSS 的 grid-row-gap（或 row-gap）是作用在整个网格容器上的，它控制的是**所有行之间的统一间距**，不是某一行“上方”或“下方”的独立间隙。你没法写 grid-row-gap: 0 12px 8px 这种语法来逐行指定——浏览器会直接忽略。
用 grid-template-rows + 空轨道模拟不同行间隙
真正能实现“第1行和第2行之间 16px，第2行和第3行之间 4px”的方式，是把间隙当成**不可见的空行轨道**来设计：
- 把原本的 3 行内容，扩展成 5 行轨道：内容行、空行、内容行、空行、内容行
- 用
grid-template-rows显式声明每条轨道高度，其中空轨道设为固定值（如16px），内容行用auto或1fr - 内容项用
grid-row精确控制落在哪几行，跳过空轨道
示例：
.container {
display: grid;
grid-template-rows: auto 16px auto 4px auto;
}
.item1 { grid-row: 1; }
.item2 { grid-row: 3; }
.item3 { grid-row: 5; }
gap 属性只接受单值或双值，不支持多值列表
gap、row-gap、column-gap 都只接受最多两个值：row-gap: 12px（统一行间距）或 gap: 12px 8px（行间距 12px，列间距 8px）。传入三个及以上值（如 row-gap: 12px 8px 4px）属于无效语法，会被浏览器静默丢弃。
- Chrome/Firefox 会忽略整条声明
- 不会报错，但也不会生效——这是最容易被误以为“写对了却没效果”的地方
- 检查 DevTools 的 Styles 面板时，这条属性会显示为 strike-through 灰色
需要动态控制时，优先考虑嵌套容器或伪元素
如果间隙需响应状态变化（比如 hover 后某两行贴得更近），硬编码轨道不灵活。这时更实际的做法是：
- 给每个网格项外层包一层 ，用子容器的
margin-bottom控制下间距- 用
::after伪元素在特定项后插入占位块，并设高度- 避免用
transform: translateY()模拟间隙——它不参与布局，会导致后续元素重叠或错位这类方案牺牲一点语义性，但可控性、可维护性远高于拼凑复杂轨道。
真正的难点不在怎么写，而在于意识到：CSS Grid 的 gap 是“轨道间”的全局约定，不是“元素间”的样式钩子。想绕开这个限制，就得主动让出一部分布局控制权，交给更细粒度的手段。
- 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
