CSS 属性

CSS row-gap 属性定义了行之间间隙的大小。

为了确保与旧版网站的兼容性，CSS Grid 中的间隙属性最初被命名为 grid-row-gap，浏览器仍然会接受 grid-row-gap 作为 row-gap 的别名。

属性值

  • <length-percentage>: 行的百分比值-gap 确定网格中行之间间隙的宽度，相对于网格容器的高度。

适用范围

多列元素、Flex 容器、网格容器。

DOM 语法

object.style.rowGap = "<length>|<percentage>";

CSS row-gap: <length>

以下示例演示 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: <percentage>

以下示例演示 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: Flex 布局

以下示例演示如何使用 row-gap 属性在相邻的 Flex 项目之间添加行间隙。

  • display:flex 和 flex-flow:wrap 属性用于创建 Flex 容器。如果项目不适合容器的宽度，它们将移动到下一行。

  • flex: 1 1 auto 属性允许弹性项目根据需要增大或缩小.

<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>