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

格列隙 | grid-row-gap

grid-row-gap属性在网格之间的装订线

代码语言:javascript
复制
/* <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>分隔网格行的沟槽的宽度。

<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: 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

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com