CSS - grid-row-end 屬性

CSS grid-row-end 屬性透過指定行、跨度或依靠自動放置來確定網格項應結束的行。它定義了網格區域的塊末端邊緣。

語法

grid-row-end: auto | span n | row-line;

屬性值

值	描述
auto	它自動確定網格項在網格佈局中的位置。預設跨度為 1。
span n	它指定元素佔據的行數空間。
row-line	它指定元素顯示必須結束的行。

CSS 網格行結束屬性示例

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

使用 Auto 值的網格行結束屬性

為了允許網格項根據專案內容和網格佈局在預設位置結束，我們使用 auto 值。它會根據專案需要多少空間以及它在網格中的當前位置自動調整結束行。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 3px solid blue;
         padding: 20px;
         text-align: center;
         color: white;
         grid-row-end: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-row-end property
   </h2>
   <h4>
      grid-row-end: auto
   </h4>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item item3 items">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item item5 items">
         Item 5
      </div>
   </div>
</body>

</html>

使用跨度值的網格行結束屬性

要使網格項從其起始行開始並跨越 n 行，我們使用 span 指定行數（例如 span 2 - 元素從起始行跨越 2 行）。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 2px solid #ff6b6b;
         padding: 20px;
         text-align: center;
         color: white;
      }

      .items {
         border: 3px solid blue;
      }

      .item1 {
         grid-row-end: span 2;
      }

      .item3 {
         grid-row-end: span 3;
      }

      .item4 {
         grid-row-end: span 4;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-row-end property
   </h2>
   <h4>
      grid-row-end: span 2 (item1),
      span 3 (item3), span 4 (item5)
   </h4>
   <p>
      item1- the element takes 
      2 rows space
   </p>
   <p>
      item3- the element takes 
      3 rows space
   </p>
   <p>
      item5- the element takes 
      4 rows space
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item item3 items">
         Item 3
      </div>
      <div class="grid-item item4 items">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
   </div>
</body>

</html>

使用行號的網格行結束屬性

要將網格項的結束行顯式設定為某個行號，無論起始行如何，專案都應在此處結束，我們指定行號（例如 3 - 元素必須顯示到第 3 行）。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 2px solid #ff6b6b;
         padding: 20px;
         text-align: center;
         color: white;
      }

      .items {
         border: 3px solid blue;
      }

      .item1 {
         grid-row-end: 3;
      }

      .item3 {
         grid-row-end: 4;
      }

      .item4 {
         grid-row-end: 5;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-row-end property
   </h2>
   <h4>
      grid-row-end: 3 (item1),
      4 (item3), 5 (item5)
   </h4>
   <p>
      item1- the display of the
      item ends at row-line 2
   </p>
   <p>
      item3- the display of the 
      item ends at row-line 3
   </p>
   <p>
      item5- the display of the 
      item ends at row-line 4
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item item3 items">
         Item 3
      </div>
      <div class="grid-item item4 items">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
grid-row-end	57	16	52	10	44

css_properties_reference.htm

列印頁面