CSS grid-gap 属性
实例
将行与列之间的简写设置为 50 像素：
.grid-container {
grid-gap: 50px;
}
亲自试一试
定义和用法
grid-gap 属性定义网格布局中行与列之间间隙的尺寸，它是以下属性的简写属性：
- grid-row-gap
- grid-column-gap
| 默认值： |
0 0 |
| 继承： |
否 |
| 动画制作： |
支持。请参阅：动画相关属性。 |
| 版本： |
CSS Grid Layout Module Level 1 |
| JavaScript 语法： |
object.style.gridGap="50px 100px" |
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 |
Chrome |
IE |
Firefox |
Safari |
Opera |
| grid-gap |
57 |
16 |
52 |
10 |
44 |
CSS 语法
grid-gap: grid-row-gap grid-column-gap;
属性值
| 值 |
描述 |
| grid-row-gap |
设置网格布局中行间隙的尺寸。默认值为 0。 |
| grid-column-gap |
设置列间隙的尺寸。默认值为 0。 |
更多实例
设置行间隙为 20 像素，列间隙为 50 像素：
.grid-container {
grid-gap: 20px 50px;
}
亲自试一试
