CSS grid - row-gap 属性

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>

本页