CSS row-gap 属性定义了行之间间隙的大小。
为了确保与旧版网站的兼容性，CSS Grid 中的 gap 属性最初被命名为 grid-row-gap，浏览器仍将接受 grid-row-gap 作为 row-gap 的别名。
可能的值
- <length-percentage> - row-gap 的百分比值确定网格中行之间的间隔宽度（相对于网格容器的高度）。
适用于
多柱元素、柔性容器、网格容器。
DOM 语法
object.style.rowGap = "<length>|<percentage>";
CSS row-gap - <长度>
以下示例演示了 row-gap： 30px 属性将网格布局中行之间的 30px 间隙相加 -
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
row-gap: 30px;
color: white;
text-align: center;
}
.grid-container > div {
background-color: red;
border: 2px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
<div>Grid item 4</div>
<div>Grid item 5</div>
<div>Grid item 6</div>
</div>
</body>
</html>
CSS row-gap - <百分比>
以下示例演示了 row-gap： 40% 属性将网格布局中行之间的 40% 差距相加 -
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
row-gap: 40%;
}
.grid-container > div {
background-color: red;
color: white;
padding: 10px;
border: 2px solid blue;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
</body>
</html>
CSS row-gap - 弹性布局
以下示例演示了如何使用 row-gap 属性在相邻的 flex 项之间添加行间隙。
- display： flex 和 flex-flow： wrap 属性用于创建 flex 容器。如果物品不适合容器的宽度，它们将移动到下一行。
- flex： 1 1 auto 属性允许 flex 项目根据需要增大或收缩。
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
width: 250px;
row-gap: 20px;
}
.flex-container > div {
border: 2px solid red;
background-color: pink;
flex: 1 1 auto;
padding: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
<div>Flex Item 4</div>
<div>Flex Item 4</div>
<div>Flex Item 5</div>
</div>
</body>
</html>
CSS column-gap - 网格布局
以下示例演示了 row-gap： 30px 属性在网格项之间添加了 30px 的垂直空间 -
<html>
<head>
<style>
.grid-container {
display: grid;
height: 150px;
grid-template-columns: 100px 1fr;
grid-template-rows: repeat(3, 1fr);
row-gap: 30px;
}
.grid-container > div {
border: 2px solid red;
background-color: pink;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
<div>Flex Item 4</div>
<div>Flex Item 4</div>
<div>Flex Item 5</div>
</div>
</body>
</html>
