CSS Grid：如何使用 Grid-template-rows 和 Grid-template-columns 属性设置不同宽度和高度

CSS Grid 是一种强大的布局系统，它可以让我们更轻松地创建复杂的布局。其中两个最基本的属性是 grid-template-rows 和 grid-template-columns，它们分别用于设置网格行和列的大小和数量。在本文中，我们将深入了解如何使用这两个属性来设置不同的宽度和高度。

Grid-template-rows 和 Grid-template-columns

在使用 Grid 布局时，我们需要定义一个网格容器，然后在其中创建网格项。网格容器可以使用 display: grid 或 display: inline-grid 属性来定义。一旦我们定义了网格容器，我们就可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格行和列的大小和数量。

Grid-template-rows

grid-template-rows 属性用于定义网格行的大小和数量。它接受一个由空格分隔的值列表，每个值表示一个网格行的大小。我们可以使用长度单位（如 px 或 em）、百分比或 fr 单位来定义行的大小。

例如，下面的代码将创建一个具有两个等高的网格行的网格容器：

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

在这个例子中，1fr 单位表示剩余空间的分数。因为我们没有指定网格容器的高度，所以两个网格行将占据容器的相等部分。

我们还可以使用 repeat() 函数来快速定义重复的网格行大小。例如，下面的代码将创建一个具有四个等高的网格行的网格容器：

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

Grid-template-columns

grid-template-columns 属性用于定义网格列的大小和数量。它的用法与 grid-template-rows 相同。例如，下面的代码将创建一个具有三个等宽的网格列的网格容器：

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

我们也可以使用 repeat() 函数来定义重复的网格列大小。例如，下面的代码将创建一个具有六个等宽的网格列的网格容器：

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

设置不同的宽度和高度

现在我们已经了解了如何使用 grid-template-rows 和 grid-template-columns 属性来定义网格行和列的大小和数量。但是，有时我们需要设置不同的宽度和高度来创建更复杂的布局。下面是一些示例代码，演示如何使用这两个属性来设置不同的宽度和高度：

设置不同的行高和列宽

.container {
  display: grid;
  grid-template-rows: 100px 200px 1fr;
  grid-template-columns: 1fr 2fr 3fr;
}

在这个例子中，我们定义了三个网格行，它们的高度分别为 100px、200px 和剩余空间的分数。我们还定义了三个网格列，它们的宽度分别为容器宽度的 1/6、1/3 和 1/2。

设置不同的行高和重复的列宽

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

在这个例子中，我们定义了三个网格行，它们的高度分别为 100px、200px 和剩余空间的分数。我们还定义了三个等宽的网格列。

设置重复的行高和不同的列宽

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

在这个例子中，我们定义了三个等高的网格行。我们还定义了三个网格列，它们的宽度分别为容器宽度的 1/6、1/3 和 1/2。

总结

CSS Grid 是一个非常强大的布局系统，它可以让我们更轻松地创建复杂的布局。在本文中，我们深入了解了如何使用 grid-template-rows 和 grid-template-columns 属性来设置不同的宽度和高度。我们学习了如何使用长度单位、百分比和 fr 单位来定义行和列的大小，以及如何使用 repeat() 函数来定义重复的大小。最后，我们还提供了一些示例代码，演示了如何使用这些属性来创建不同的布局。

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