CSS grid-row-gap 属性
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的最新版本。