CSS - grid-row 屬性

CSS grid-row 是一個簡寫屬性，用於透過指定行、跨度或依靠自動放置來控制網格項在網格容器中行方向上的位置。它是單個網格相關屬性的簡寫：grid-row-start 和 grid-row-end。

語法

grid-row: auto | grid-row-start / grid-row-end;

屬性值

值	描述
auto	元素的大小取決於內容或可用空間。
grid-row-start	它指定網格項在網格行中的起始位置。
grid-row-end	它指定在哪個行線停止顯示專案或跨越多少行。

CSS Grid row 屬性示例

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

使用 Auto 值的 Grid Row 屬性

為了讓網格元素的大小根據其內容或可用空間自動確定，我們使用 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: auto;
      }
   </style>
</head>

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

</html>

使用整數的 Grid Row 屬性

為了根據網格容器的行數確定網格元素的大小，我們指定起始行線號和結束行線號。根據指定的值，元素的大小將進行調整。這在下面的示例中顯示。

示例

<!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: 1 / 3;
      }

      .item2 {
         grid-row: 2 / 3;
      }

   </style>
</head>

<body>
   <h2>
      CSS grid-row property
   </h2>
   <h4>
      grid-row: 1 / 3 (item1),
      and 2/3 (item2)
   </h4>
   <p>
      item1- starts at row-line 1
      and ends at row-line 3
   </p>
   <p>
      item2- starts at row-line 2
      and ends at row-line 3
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item item2 items">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
   </div>
</body>

</html>

使用 Span 值的 Grid Row 屬性

為了確定網格元素的大小，我們可以使用 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: span 3;
      }

      .item2 {
         grid-row: 2 / span 2;
      }

   </style>
</head>

<body>
   <h2>
      CSS grid-row property
   </h2>
   <h4>
      grid-row:span 3 (item1), 
      2 / span 2 (item2)
   </h4>
   <p>
      item1- starts at row-line 1
      and spans 3 rows
   </p>
   <p>
      item2- starts at row-line 2
      and spans 2 rows
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item item2 items">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
grid-row	57	16	52	10	44

css_properties_reference.htm

列印頁面