CSS Grid 布局：如何使用 grid-template-rows 属性设置网格区域的行高和起始位置-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 布局是一种强大的网格系统，它让我们能够轻松地对元素进行分布和定位。其中，grid-template-rows 属性可以帮助我们设置网格区域的行高和起始位置，下面详细介绍它的使用方法。

grid-template-rows

grid-template-rows 属性是一个用于设置网格行高的属性，它接受一个由一个或多个长度、百分比、关键词或行跨度组成的值列表。这些值表示网格区域中每一行的行高。例如：

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

这个例子中，我们定义了一个 grid-container 容器，并使用 grid-template-columns 定义了 3 列等宽的网格区域，使用 grid-template-rows 定义了 3 行具有不同高度的网格区域。

除了使用长度、百分比和跨度来定义行高，我们也可以使用关键词来定义行高。常用的关键词有：

auto，表示行高会自适应该行的内容；
min-content，表示行高会自适应该行的内容的最小高度；
max-content，表示行高会自适应该行的内容的最大高度；
fit-content，表示行高会自适应该行的内容的合适高度。

例如：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto max-content;
}

这个例子中，我们定义了一个 grid-container 容器，并使用 grid-template-columns 定义了 2 列等宽的网格区域，使用 grid-template-rows 定义了 2 行具有不同高度的网格区域。其中，第一行的高度会根据该行的内容自适应，第二行的高度会根据该行的内容的最大高度自适应。

设置网格区域的起始位置

除了设置网格区域的行高，我们也可以使用 grid-row-start 和 grid-row-end 属性来设置网格区域的起始位置。例如：

// www.javascriptcn.com code example
.grid-container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: repeat(4, 100px);
}

.grid-item {
  grid-row-start: 2;
  grid-row-end: 5;
}

这个例子中，我们定义了一个 grid-container 容器，并使用 grid-template-columns 和 grid-template-rows 定义了 2 列、4 行等大小的网格区域。然后，我们定义了一个 grid-item 容器，并使用 grid-row-start 和 grid-row-end 来设置该容器的起始行和结束行。在本例中，该容器跨越了 3 行网格区域，起始位置为第二行。

我们还可以使用 span 关键词来设置网格区域跨越的行数。例如：

.grid-item {
  grid-row-start: 2;
  grid-row-end: span 3;
}

这个例子中，我们使用 span 关键词来设置该容器跨越 3 行网格区域，起始位置为第二行。

示例代码

最后，我们来看一个完整的示例代码，它演示了如何使用 grid-template-rows 和 grid-row-start/grid-row-end 属性来设置网格区域的行高和起始位置：

// www.javascriptcn.com code example
<div class="grid-container">
  <div class="grid-item item-1">1</div>
  <div class="grid-item item-2">2</div>
  <div class="grid-item item-3">3</div>
  <div class="grid-item item-4">4</div>
  <div class="grid-item item-5">5</div>
  <div class="grid-item item-6">6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px 300px;
  gap: 10px;
}

.grid-item {
  background-color: #f4f4f4;
  padding: 10px;
  font-size: 20px;
  text-align: center;
}

.item-1 {
  grid-row-start: 2;
  grid-row-end: 4;
}

.item-2 {
  grid-row-start: 1;
  grid-row-end: 3;
}

.item-3 {
  grid-row-start: 3;
  grid-row-end: 4;
}

.item-4 {
  grid-row-start: 2;
  grid-row-end: 3;
}

.item-5 {
  grid-row-start: 1;
  grid-row-end: 4;
}

.item-6 {
  grid-row-start: 2;
  grid-row-end: 5;
}
</style>

以上就是关于如何使用 grid-template-rows 属性设置网格区域的行高和起始位置的介绍，希望对大家有所帮助。

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

CSS Grid 布局：如何使用 grid-template-rows 属性设置网格区域的行高和起始位置

接着读