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