CSS - grid-template-rows 属性

CSS grid-template-rows 属性用于定义网格布局中行数和大小。值是用空格分隔的列表。

语法

grid-template-rows: none | auto | max-content | min-content | length | initial | inherit;

属性值

值	描述
none	如果需要，可以创建行。默认值。
auto	行的大小取决于容器的大小和行中项目内容的大小。
max-content	使用此值时，每行的尺寸取决于该行中最大项目的尺寸。
min-content	使用此值时，每行的尺寸取决于该行中最小的项目的尺寸。
length	行的尺寸以长度单位指定（例如 px、em 等）。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 网格模板行属性示例

以下示例使用不同的值解释了grid-template-rows 属性。

使用 none 值的网格模板行属性

为了不为网格容器定义任何明确的行大小，我们使用none 值。它有效地重置行定义，网格将不使用任何已定义的行结构。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

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

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: none
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
   </div>

</body>

</html>

使用 auto 值的网格模板行属性

为了允许行根据其内容自动调整大小，我们使用auto 值。每行的高度都足以容纳其内容。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

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

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: auto auto auto 
      (3 rows are created and sizes depend
      on the size of container and content of items)
   </h4>
   <div class="grid-container">
      <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>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

使用 max-content 值的网格模板行属性

为了使行的高度与其内容所需的一样高，而没有任何截断或换行，我们使用max-content 值。无论网格容器的大小如何，行都将扩展以适应其包含的最长内容。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

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

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: max-content 
      max-content max-content (3 rows are
      created and sizes depend on the largest
      item in the row)
   </h4>
   <div class="grid-container">
      <div>
         This is Item-1
      </div>
      <div>
         2
      </div>
      <div>
         This is Item-3 in row 1
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

使用 min-content 值的网格模板行属性

为了使行尽可能短，同时仍然适合其内容而不会溢出，我们使用min-content 值。行的高度仅需显示其内容而无需换行，但不会更窄。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

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

      .grid-container > div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: min-content 
      min-content min-content (3 rows 
      are created and sizes depend on the 
      smallest item in the row)
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         2
      </div>
      <div>
         Item-3
      </div>
      <div>
         4
      </div>
      <div>
         5
      </div>
      <div>
         6
      </div>
      <div>
         Item-7
      </div>
      <div>
         8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

使用长度值的网格模板行属性

可以使用长度值（例如 px、em、rem 等）设置行数和大小。根据提供的值，将创建具有指定宽度的行数。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .container{
         display: grid;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
         grid-template-columns: auto auto auto;
      }
      .grid-container1 {
         grid-template-rows: 140px 200px 140px;
      }
      .grid-container2{
         grid-template-rows: 10em 7em 10em;
      }
      .container > div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
      .
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: 150px 200px 150px 
      (3 rows are created and sizes are 150px,
      200px and 150px respectively)
   </h4>
   <div class=" container grid-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>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>
   <h4>
   grid-template-rows: 10em 7em 10em 
   (3 rows are created and sizes are 
   10em, 7em and 10em respectively)
   </h4>
   <div class="container grid-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>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

使用百分比值的网格模板行属性

可以使用百分比值（例如 10%、20%）设置行数和大小。根据提供的值，将创建具有指定宽度的行数。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         height: 400px;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
         grid-template-columns: auto auto auto;
         grid-template-rows: 25% 15% 25%;
      }

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: 25% 15% 25% 
      (3 rows are created and sizes are 25%,
      15% and 25% of the size of the container's
      width respectively)
   </h4>
   <div class="grid-container">
      <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>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>
</body>

</html>

支持的浏览器

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

css_properties_reference.htm

打印页面