首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

格列隙 | grid-column-gap

grid-column-gap指定装饰之间的网列

代码语言:javascript
复制
/* <length> values */
grid-column-gap: 20px;
grid-column-gap: 1em;
grid-column-gap: 3vmin;
grid-column-gap: 0.5cm;

/* <percentage> value */
grid-column-gap: 10%;

/* Global values */
grid-column-gap: inherit;
grid-column-gap: initial;
grid-column-gap: unset;

效果就像受影响的人网格线获取宽度:栅极轨道在两个网格线之间是代表它们的排水沟之间的空间。为了调整轨道尺寸,每个沟槽基本上被视为指定长度的额外轨道。负值无效。

计算值

0

应用于

grid containers

继承

no

百分比

refer to corresponding dimension of the content area

使用媒体

visual

计算值

the percentage as specified or the absolute length

动画类型

a length

规范顺序

the unique non-ambiguous order defined by the formal grammar

语法

取值

<length-percentage>分隔网格列的沟槽的宽度。

<percentage>值与元素的维度相关。

形式语法

代码语言:javascript
复制
<length-percentage>where 
<length-percentage> = <length> | <percentage>

HTML内容

代码语言:javascript
复制
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS内容

代码语言:javascript
复制
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  grid-column-gap: 20px;
}

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

规范

Specification

Status

Comment

CSS Grid LayoutThe definition of 'grid-column-gap' in that specification.

Candidate Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Edge

Opera

Safari

Basic support

57.01

52.0 (52.0)2

No support3

No support3

441

No support5

Feature

Android Webview

Chrome for Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

57.01

57.01

52.0 (52.0)2

No support3

44

No support

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com