CSS - grid-gap 屬性

CSS grid-gap 屬性是一個簡寫屬性，用於定義網格佈局中行和列之間間隙的大小。grid grid-gap 屬性是以下單個網格相關屬性的簡寫：grid-row-gap 和 grid-column-gap

語法

grid-gap: row-gap column-gap;

屬性值

值	描述
row-gap	它使用長度或百分比值指定網格佈局中行之間的間隙。
column-gap	它使用長度或百分比值指定網格佈局中列之間的間隙。

CSS 網格間隙屬性示例

以下示例使用不同的值解釋了grid-gap 屬性。

使用長度值的網格間隙屬性

要在單個語句中設定行和列之間的垂直和水平間隙，我們將間隙值（以長度 - px、em 等表示）指定給grid-gap 屬性。該屬性最多接受兩個值，單個值在兩個方向上應用相同的間隙，而兩個值分別單獨設定垂直和水平間隙。這在以下示例中顯示。

示例

<!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-gap: 25px;
      }

      .container2 {
         grid-gap: 15px 56px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-gap Property
   </h2>
   <h4>
      grid-gap: 25px (horizontal and vertical
      gap of 25px between rows and columns)
   </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-column-gap: 15px 56px (vertical gap of 15px
      and horizontal gap of 56px between rows and columns)
   </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>

使用百分比值的網格間隙屬性

要在單個語句中設定行和列之間的垂直和水平間隙，我們將間隙值（以百分比表示）指定給grid-gap 屬性。該屬性最多接受兩個值，單個值在兩個方向上應用相同的間隙，而兩個值分別單獨設定垂直和水平間隙。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         height: 200px;
         width: 500px;
         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-gap: 10%;
      }

      .container2 {
         grid-gap: 15% 20%;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-gap Property
   </h2>
   <h4>
      grid-gap: 10% (horizontal and vertical
      gap of 10% relative to the size of the
      container applied to rows and columns)
   </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-column-gap: 15% 20% (vertical gap of 15%
      and horizontal gap of 20% relative to the size
      of the container applied to rows and columns)
   </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>

支援的瀏覽器

屬性
grid-gap	57	16	52	10.1	44

css_properties_reference.htm

列印頁面

上一個

下一個