gap 属性是用来描述网格行与列之间的间隙,该属性是row-gap and column-gap的简写形式。

CSS Grid Layout 起初是用 grid-gap 属性来定义的,目前逐渐被 gap 替代。但是,为了兼容那些不支持 gap 属性的浏览器,你需要像上面的例子一样,使用带有前缀的属性。

语法

/* One <length> value */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* One <percentage> value */
gap: 16%;
gap: 100%;

/* Two <length> values */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* One or two <percentage> values */
gap: 16% 100%;
gap: 21px 82%;

/* calc() values */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* Global values */
gap: inherit;
gap: initial;
gap: unset;

该属性用来表示 <'row-gap'> 和 <'column-gap'>的值,而<'column-gap'>是可选的,假如 <'column-gap'> 缺失的话,则会被设置成跟<'row-gap'>一样的的值。

<'row-gap'> and <'column-gap'> 都可以用  <length> 或者 <percentage> 来表示。

<length>
网格线之间的间隙宽度。
<percentage>
网格线直接的间隙宽度,相对网格容器的百分比。

正式语法

<'row-gap'> <'column-gap'>?

示例

Flex布局

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

HTML

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  background-color: lime;
  flex: 1 1 auto;
  width: 100px; 
  height: 50px; 

}

Result

Grid布局

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  background-color: lime;
}

Result

规范

规范 状态 备注
CSS Box Alignment Module Level 3
gap
Working Draft Initial definition

初始值as each of the properties of the shorthand:
适用元素grid containers
是否是继承属性
适用媒体visual
计算值as each of the properties of the shorthand:
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typeas each of the properties of the shorthand:
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

在Flex 布局的兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome ? Edge ? Firefox Full support 63IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 63Opera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

在Grid layout的兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 29
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16
Full support 16
Full support 16
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Firefox Full support 61
Full support 61
Full support 52
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 40
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 53
Full support 53
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 28
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1
Alternate Name
Full support 10.1
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
WebView Android Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Chrome Android Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 29
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile No support NoFirefox Android Full support 61
Full support 61
Full support 52
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 40
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 53
Full support 53
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Safari iOS Full support 10.3
Alternate Name
Full support 10.3
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Samsung Internet Android Full support 6.0
Alternate Name
Full support 6.0
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
<percentage> values
Experimental
Chrome Full support 66Edge Full support 16Firefox Full support 52IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Edge Mobile No support NoFirefox Android Full support 52Opera Android Full support 53Safari iOS No support NoSamsung Internet Android No support No
calc() values
Experimental
Chrome Full support 66Edge ? Firefox Full support 52IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Edge Mobile No support NoFirefox Android Full support 52Opera Android Full support 53Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

参见

文档标签和贡献者

标签: 
此页面的贡献者: narol
最后编辑者: narol,