格列隙 | grid-row-gap
grid-row-gap
grid-row-gap
属性在网格之间的装订线
/* <length> values */
grid-row-gap: 20px;
grid-row-gap: 1em;
grid-row-gap: 3vmin;
grid-row-gap: 0.5cm;
/* <percentage> value */
grid-row-gap: 10%;
/* Global values */
grid-row-gap: inherit;
grid-row-gap: initial;
grid-row-gap: unset;
效果就好像受影响的网格线获得了宽度: 两条网格线之间的网格轨道是代表它们的装订线之间的空间。为了跟踪调整大小, 每个装订线实质上都被视为指定长度的额外跟踪。负值无效。
初始值 | 0 |
---|---|
适用于 | 网格容器 |
遗传 | 没有 |
百分比 | 请参阅内容区域的相应尺寸 |
媒体 | visual |
计算值 | 指定的百分比或绝对长度 |
动画类型 | 长度 |
规范的顺序 | 形式语法定义的独特的非模糊顺序 |
语法
取值
<length-percentage>分隔网格行的沟槽的宽度。
形式语法
<length-percentage>where
<length-percentage> = <length> | <percentage>
例
HTML内容
<div id="grid">
<div></div>
<div></div>
<div></div>
</div>
CSS内容
#grid {
display: grid;
height: 200px;
grid-template-columns: 200px;
grid-template-rows: repeat(3, 1fr
grid-row-gap: 20px;
}
#grid > div {
background-color: lime;
}
规范
Specification | Status | Comment |
---|---|---|
CSS Grid LayoutThe definition of 'grid-row-gap' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 57.01 | 20 (12.10240)-ms3 | 52.0 (52.0)2 | 10.0-ms3 | 444 | 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 | 444 | No support5 |