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

打印页面