CSS grid-gap 属性

定义和用法

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

• grid-row-gap
• grid-column-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;

属性值

技术细节

浏览器支持

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