CSS Grid 布局：如何使用 grid-template-rows 属性设置行数-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 布局是前端界最流行的布局方式之一，它提供了强大的布局功能，使得我们能够更加灵活和高效地设计页面布局。在 CSS Grid 布局中，grid-template-rows 属性用于设置网格容器中每一行高度的大小，本篇文章将重点介绍如何使用 grid-template-rows 属性来实现网格布局。

什么是 grid-template-rows 属性

在 CSS Grid 布局中，我们可以通过 grid-template-rows 属性来设置网格容器中每一行的高度大小。该属性的值可以是一个固定的值，也可以是一个自适应的值，还可以是一个具有弹性的值。

对于固定值，我们可以使用像素（px）、厘米（cm）等单位来设置高度大小，例如：

.container {
  display: grid;
  grid-template-rows: 100px 50px 200px;
}

上述代码中，我们将网格容器的高度分为三行，分别为 100 像素、50 像素和 200 像素。

对于自适应的值，我们可以使用百分比（%）来设置高度大小，例如：

.container {
  display: grid;
  grid-template-rows: 30% 20% 50%;
}

上述代码中，我们将网格容器的高度分为三行，分别占据了网格容器高度的 30%、20% 和 50%。

对于具有弹性的值，我们可以使用 fr 单位来设置高度大小，例如：

.container {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
}

上述代码中，我们将网格容器的高度分为三行，其中第二行高度是第一行和第三行高度的两倍。

如何使用 grid-template-rows 属性设置行数

在实际应用中，我们通常需要更加灵活地设置网格容器行数，可以使用多种方法来实现。下面，我们分别介绍这些方法的实现方式。

1. 使用固定的值

使用固定的值来设置网格容器行数，需要明确知道网格容器的高度和每一行的高度大小，例如：

.container {
  display: grid;
  height: 500px;
  grid-template-rows: 100px 50px 200px;
}

上述代码中，我们使用了固定的值来设置网格容器的高度和每一行的高度大小，可以很好地控制网格容器的布局。

2. 使用百分比

使用百分比来设置网格容器行数，可以根据浏览器的大小自适应调整，例如：

.container {
  display: grid;
  height: 100%;
  grid-template-rows: 30% 20% 50%;
}

上述代码中，我们将网格容器的高度设置为屏幕大小的百分比，可以根据屏幕大小自适应调整网格容器的布局。

3. 使用弹性值

使用弹性值来设置网格容器行数，可以根据内容的多少进行自适应调整，例如：

.container {
  display: grid;
  height: 100%;
  grid-template-rows: 1fr 2fr 1fr;
}

上述代码中，我们将网格容器的高度分为三行，其中第二行的高度占据了网格容器高度的一半，可以根据内容的多少进行自适应调整。

如何使用 grid-template-rows 属性设置网格布局

在实际应用中，我们通常需要将网格容器分为多行多列，可以使用多种方式来设置网格布局。下面，我们分别介绍这些方式的实现方式。

1. 均分法

均分法是最简单、最常见的一种方式，即将网格容器平均分成若干行若干列，例如：

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

上述代码中，我们将网格容器平均分成了 3 行 3 列，每一行和每一列的高度大小相等。

2. 非均分法

非均分法是一种更加灵活、更加自由的方式，可以根据实际需求进行设置，例如：

.container {
  display: grid;
  grid-template-rows: 100px 50px 1fr;
  grid-template-columns: 20% 80%;
}

上述代码中，我们将网格容器分为了 3 行 2 列，第一行和第二行的高度分别为 100 像素和 50 像素，第三行高度大小根据内容进行自适应调整；第一列占据了网格容器宽度的 20%，第二列占据了网格容器宽度的 80%。

示例代码

最后，我们提供一份完整的示例代码，以供参考和学习使用：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        height: 500px;
        grid-template-rows: 100px 50px 200px;
        grid-template-columns: 20% 80%;
        grid-gap: 10px;
      }

      .item {
        background-color: #f1f1f1;
        text-align: center;
        padding: 20px;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </body>
</html>

上述代码中，我们创建了一个网格容器，分为了 3 行 2 列，每一行的高度分别为 100 像素、50 像素和 200 像素，第一列占据了网格容器宽度的 20%，第二列占据了网格容器宽度的 80%。我们在网格容器中添加了六个项目，每个项目都有一个背景色和文字内容。实现效果如下所示：

通过上述示例代码，我们可以更好地了解如何使用 grid-template-rows 属性来设置网格布局，以及在实际应用中的一些技巧和方法，希望能够对你有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d66a64a941bf7134c2cd96

CSS Grid 布局：如何使用 grid-template-rows 属性设置行数