View in EnglishAlways switch to English

row-gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2017年10月⁩.

row-gap 该CSS 属性用来设置行元素之间的间隙（gutter）大小。

规范的早期版本将此属性命名为grid-row-gap，为了保持与旧网站的兼容性，浏览器仍然会将grid-row-gap 视为row-gap 的别名。

尝试一下

row-gap: 0;

row-gap: 1ch;

row-gap: 1em;

row-gap: 20px;

<section>  <div>    <div>      <div>One</div>      <div>Two</div>      <div>Three</div>      <div>Four</div>      <div>Five</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-template-columns: 1fr 1fr;  width: 200px;}#example-element > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;}

语法

css

/* <length> 值 */row-gap: 20px;row-gap: 1em;row-gap: 3vmin;row-gap: 0.5cm;/* <percentage> 值 */row-gap: 10%;/* 全局值 */row-gap: inherit;row-gap: initial;row-gap: revert;row-gap: revert-layer;row-gap: unset;

值

<length-percentage>: 表示行之间的间隔宽度。<percentage> 表示相对栅格容器的百分比。

形式定义

初始值	`normal`
适用元素	multi-column elements, flex containers, grid containers
是否是继承属性	否
Percentages	refer to corresponding dimension of the content area
计算值	as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
动画类型	alength,percentage or calc();

形式语法

row-gap =
normal|
<length-percentage [0,∞]>

<length-percentage> =
<length>|
<percentage>

示例

弹性布局

HTML

html

<div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

CSS

css

#flexbox {  display: flex;  flex-wrap: wrap;  width: 300px;  row-gap: 20px;}#flexbox > div {  border: 1px solid green;  background-color: lime;  flex: 1 1 auto;  width: 100px;  height: 50px;}

结果

网格布局

HTML

html

<div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

CSS

css

#grid {  display: grid;  height: 200px;  grid-template-columns: 150px 1fr;  grid-template-rows: repeat(3, 1fr);  row-gap: 20px;}#grid > div {  border: 1px solid green;  background-color: lime;}