格列隙 | grid-column-gap (Grid Layout) - CSS 中文开发手册
grid-column-gap指定装饰之间的网列。
/* <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>值与元素的维度相关。
形式语法
<length-percentage>where <length-percentage> = <length> | <percentage>
例
HTML内容
<div id="grid"> <div></div> <div></div> <div></div> </div>
CSS内容
#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 |