row-gap
CSS
property sets the size of the gap (
gutter
) between an element's grid rows.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
CSS 栅格布局
initially defined the
grid-row-gap
property. This prefixed property is being replaced by
row-gap
. However, in order to support browsers that implemented
grid-row-gap
and not
row-gap
for grid, you will need to use the prefixed property as in the interactive example above.
/* <length> values */ row-gap: 20px; row-gap: 1em; row-gap: 3vmin; row-gap: 0.5cm; /* <percentage> value */ row-gap: 10%; /* Global values */ row-gap: inherit; row-gap: initial; row-gap: unset;
<length-percentage>
<percentage>
values are relative to the dimension of the element.
| 初始值 |
normal
|
|---|---|
| 适用于 | multi-column elements, flex containers, grid containers |
| 继承 | no |
| 百分比 | 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 |
| 动画类型 | a length , percentage or calc(); |
normal | <length-percentage>where
<length-percentage> = <length> | <percentage>
这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
<div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
#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;
}
<div id="grid"> <div></div> <div></div> <div></div> </div>
#grid {
grid-row-gap: 20px;
}
#grid {
display: grid;
height: 200px;
grid-template-columns: 200px;
grid-template-rows: repeat(3, 1fr);
row-gap: 20px;
}
#grid > div {
border: 1px solid green;
background-color: lime;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Box Alignment Module Level 3
The definition of 'row-gap' in that specification. |
工作草案 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Supported in Flex Layout | Chrome 完整支持 84 | Edge 完整支持 84 | Firefox 完整支持 63 | IE 不支持 No | Opera 完整支持 70 | Safari 不支持 No | WebView Android 完整支持 84 | Chrome Android 完整支持 84 | Firefox Android 完整支持 63 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Supported in Grid Layout |
Chrome
完整支持
66
|
Edge
完整支持
16
|
Firefox
完整支持
61
|
IE 不支持 No |
Opera
完整支持
53
|
Safari
完整支持
12.1
|
WebView Android
完整支持
66
|
Chrome Android
完整支持
66
|
Firefox Android
完整支持
61
|
Opera Android
完整支持
47
|
Safari iOS
完整支持
12
|
Samsung Internet Android
完整支持
9.0
|
完整支持
不支持
用户必须明确启用此特征。
使用非标名称。
column-gap
,
gap