CSS grid-gap 属性

定义和用法

grid-gap 属性定义网格布局中行与列之间间隙的尺寸,它是以下属性的简写属性:

注意:此属性在 CSS3 中已重命名为 gap

另请参阅:

CSS 教程:CSS 网格布局

CSS 参考手册:grip-row-gap 属性

CSS 参考手册:grip-column-gap 属性

实例

例子 1

将行与列之间的简写设置为 50 像素:

.grid-container {
  grid-gap: 50px;
}

亲自试一试

例子 2

设置行间隙为 20 像素,列间隙为 50 像素:

.grid-container {
  grid-gap: 20px 50px;
}

亲自试一试

CSS 语法

grid-gap: grid-row-gap grid-column-gap;

属性值

描述
grid-row-gap 设置网格布局中行间隙的尺寸。默认值为 0。
grid-column-gap 设置列间隙的尺寸。默认值为 0。

技术细节

默认值: 0 0
继承:
动画制作: 支持。请参阅:动画相关属性
版本: CSS Grid Layout Module Level 1
JavaScript 语法: object.style.gridGap="50px 100px"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44