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;
}

亲自试一试

相关页面

CSS 教程:CSS 网格布局

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

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

CSS 参考手册

CSS 属性

目录