CSS grid-row-gap 属性

CSS grid-row-gap 属性用于设置网格行之间的空隙大小，也就是网格行的外间距。

语法

grid-row-gap: <length> | <percentage> | normal;

• <length>: 设置行之间的固定长度值，比如 10px。
• <percentage>: 设置行之间的相对值。
• normal: 浏览器默认的行间距，通常为0。

可选值

• length: 支持所有长度单位，如 px、pt等。
• percentage: 百分比，相对于网格容器的 inline size。
• normal: 浏览器默认值。

示例

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    grid-row-gap: 20px;
}

这个示例中，grid-container 网格容器被定义为一个 3列 3行 的网格布局，每行的高度设置为100px，行之间的间距为20px。

注意点

• 该属性只能被应用于网格容器上，所以必须先在网格容器上定义网格布局。
• 在网格布局中，行间距是指 行之间（即 $grid-row$） 的距离，不是整个容器的距离。
• 如果网格容器中的行只有一行，那么该属性将没有效果。

兼容性

该属性兼容性非常良好，在所有现代浏览器中都能使用，以及IE10和IE11的最新版本。