格列隙 | grid-column-gap (Grid Layout) - CSS 中文开发手册 - Break易站
格列隙 | 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 |