CSS - grid-auto-rows 属性

CSS grid-auto-rows 属性定义了隐式创建的网格行轨道或一组轨道的尺寸。当网格项放置在未通过 grid-template-rows 指定大小的行中时，网格系统会创建隐式网格轨道来容纳它。如果使用 **grid-template-rows**，则此属性无效。

语法

grid-auto-rows: auto | length | percentage | max-content | min-content | minmax(min, max)| fit-content();

属性值

值	描述
auto	行的尺寸取决于容器的尺寸。默认值。
长度	使用长度单位设置行的尺寸。
百分比	使用百分比值设置行的尺寸。
max-content	行的尺寸取决于内容的长度。不会发生换行。
min-content	行的尺寸取决于内容的长度。会发生换行。
minmax(min, max)	它指定了最小默认行大小和最大可达到的行大小。
fit-content()	它指定了要显示内容的尺寸范围。可能会发生换行。

CSS 网格自动行属性示例

以下示例说明了使用不同值的 **grid-auto-rows** 属性。

使用 Auto 值的网格自动行属性

为了允许网格项根据其内容和网格容器中的可用空间自行调整大小，我们使用 **auto** 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: auto;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

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

   </div>
</body>

</html>

使用长度值的网格自动行属性

为了设置隐式行的尺寸，我们可以使用长度单位（例如 10px、20em 等）指定尺寸。因此，所有隐式创建的行都将具有指定的尺寸。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: 140px;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows property
   </h2>
   <h4>
      grid-auto-rows: 140px (each 
      row is 140px high)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

使用百分比值的网格自动行属性

为了设置隐式行的尺寸，我们可以使用百分比值（例如 10%、20% 等）指定尺寸，这些值将尺寸分配为容器尺寸的百分比。因此，所有隐式创建的行都将具有指定的尺寸。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         height: 300px;
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: 40%;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows property
   </h2>
   <h4>
      grid-auto-rows: 40% (each row has 
      40% of the container's height)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

使用 Max Content 值的网格自动行属性

为了将行的高度设置为包含的最大内容的高度，我们使用 **max-content** 值。这意味着行将扩展以适应其最大的内容项，而不会有任何截断或溢出。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: max-content;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows property
   </h2>
   <h4>
      grid-auto-rows: max-content (the height of the 
      items in each row is determined by the longest
      sentence height in the row)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item
      </div>
      <div class="grid-item item2">
         This is the second box in the grid layout
         and is being made longer to demonstrate the effect.
      </div>
      <div class="grid-item item3">
         This is third box in the layout.
      </div>
      <div class="grid-item item4">
         This is fourth box in the layout.
      </div>
      <div class="grid-item item5">
         This is the fifth box in the grid layout.
      </div>

   </div>
</body>

</html>

使用 Min Content 值的网格自动行属性

为了将行高设置为适合内容且不会溢出的最小尺寸，我们使用 **min-content** 值。行将尽可能短，同时仍确保内容完全可见且不会被切断。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: min-content;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows Property
   </h2>
   <h4>
      grid-auto-rows: min-content (The rows will be sized
      to fit the minimum height required by their content.)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first item.
      </div>
      <div class="grid-item item2">
         This is Second item.
      </div>
      <div class="grid-item item3">
         This is third item 
      </div>
      <div class="grid-item item4">
         This is fourth
      </div>
      <div class="grid-item item5">
         This is fifth
      </div>
   </div>
</body>

</html>

使用 MinMax 函数的网格自动行属性

为了定义网格项的尺寸范围，我们使用 **minmax()** 函数来指定项的默认最小尺寸和最大可达到的尺寸（例如 minmax(50px,100px) 表示初始尺寸为 50px，但元素可以增长到 100px）。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: minmax(40px, 87px);
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows property
   </h2>
   <h4>
      grid-auto-rows: minmax(40px, 87px) (the initial 
      height of the items is 40px and maximum 
      attainable height is 87px)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item1
      </div>
      <div class="grid-item item2">
         This is the second box in the grid layout and
         is being made longer to demonstrate the effect.
      </div>
      <div class="grid-item item3">
         This is third box in the layout.
      </div>
      <div class="grid-item item4">
         This is fourth box in the layout.
      </div>
      <div class="grid-item item5">
         This is the fifth box in the grid layout.
      </div>

   </div>
</body>

</html>

使用 Fit Content 函数的网格自动行属性

为了设置适合其内容但位于指定最大尺寸内的行高（例如 fit-content(200px) 表示行将根据需要调整高度以适合内容，但不会超过 200 像素）。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: fit-content(50px);
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows Property
   </h2>
   <h4>
      grid-auto-rows: fit-content (The rows will
      have a maximum height of 50px)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first item.
      </div>
      <div class="grid-item item2">
         This is Second item .
      </div>
      <div class="grid-item item3">
         This is third item 
      </div>
      <div class="grid-item item4">
         This is fourth
      </div>
      <div class="grid-item item5">
         This is fifth
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
grid-auto-rows	57	16	52	10	44

css_properties_reference.htm

打印页面