CSS - grid-row-gap 属性

CSS grid-row-gap 属性用于定义网格布局中行之间间隙（或空间）的大小。它指定网格容器中行之间的垂直间距。

语法

grid-row-gap: length | percentage;

属性值

值	描述
长度值	它使用长度值（px、em 等）指定网格布局中行之间的间隙。
百分比	它使用百分比值指定网格布局中行之间的间隙。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 网格行间隙属性示例

以下示例说明了使用不同值的 grid-row-gap 属性。

使用长度值的网格行间隙

可以使用长度值（例如 10px、10em 等）设置网格布局中行之间的间隙。这仅设置行之间的垂直间隙。如下例所示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgrey;
         display: grid;
         grid-template-columns: auto auto auto;
         padding: 10px;
      }

      .grid-container>div {
         border: 2px solid green;
         color: white;
         text-align: center;
         background-color: lightgreen;
         padding: 10px;
      }

      .container1 {
         grid-row-gap: 25px;
      }

      .container2 {
         grid-row-gap: 4em;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-row-gap Property
   </h2>
   <h4>
      grid-row-gap: 25px 
      (vertical gap of 25px between rows)
   </h4>
   <div class="grid-container container1">
      <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>
   <h4>
      grid-row-gap: 4em 
      (vertical gap of 4em between rows)
   </h4>
   <div class="grid-container container2">
      <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>

使用百分比值的网格行间隙

可以使用百分比值（例如 10%、2% 等）设置网格布局中行之间的间隙。这仅设置行之间的垂直间隙。如下例所示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgrey;
         height: 200px;
         display: grid;
         grid-template-columns: auto auto auto;
         grid-row-gap: 30%;
         padding: 10px;
      }

      .grid-container>div {
         border: 2px solid green;
         color: white;
         text-align: center;
         background-color: lightgreen;
         padding: 10px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-row-gap Property
   </h2>
   <h4>
      grid-row-gap: 30% (vertical gap of 
      30% relative to container's height)
   </h4>
   <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>

支持的浏览器

属性
grid-row-gap	57	16	52	10.1	44

css_properties_reference.htm

打印页面