在线文档教程
CSS
网格布局 | Grid Layout

格列隙 | 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; }

规范

SpecificationStatusComment
CSS Grid LayoutThe definition of 'grid-row-gap' in that specification.Candidate RecommendationInitial definition

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support57.0120 (12.10240)-ms352.0 (52.0)210.0-ms3444No support5

FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support57.0157.0152.0 (52.0)2No support3444No support5