跳到主要内容

CSS 网格模板行

CSS网格布局（CSS Grid Layout）是一种强大的布局系统，允许开发者以二维方式创建复杂的网页布局。其中，grid-template-rows 属性用于定义网格容器中行的数量和大小。通过掌握 grid-template-rows，你可以精确控制网格行的布局，从而创建出灵活且响应式的设计。

什么是 grid-template-rows？​

grid-template-rows 是CSS网格布局中的一个属性，用于定义网格容器中每一行的高度。你可以为每一行指定一个固定值、百分比值、或者使用 fr 单位（分数单位）来分配可用空间。此外，你还可以使用 minmax() 函数来设置行的最小和最大高度。

基本语法​

css
grid-template-rows: <track-size> ...;
  • <track-size>：可以是长度值（如 px、em）、百分比值、fr 单位，或者 minmax() 函数。

示例​

以下是一个简单的示例，展示了如何使用 grid-template-rows 定义一个三行网格：

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

在这个示例中，网格容器被分为三行，高度分别为 100px、200px 和 150px。

逐步讲解​

1. 定义固定高度的行​

你可以为每一行指定一个固定的高度。例如：

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

在这个例子中，网格容器有三行，高度分别为 50px、100px 和 75px。

2. 使用 fr 单位分配空间​

fr 单位（分数单位）允许你根据可用空间按比例分配行的高度。例如：

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

在这个例子中，网格容器有三行，第二行的高度是其他两行的两倍。

3. 使用 minmax() 函数​

minmax() 函数允许你为行设置最小和最大高度。例如：

css
.grid-container {
  display: grid;
  grid-template-rows: minmax(100px, auto) 200px;
}

在这个例子中，第一行的高度至少为 100px，但可以根据内容自动扩展。第二行的高度固定为 200px。

4. 重复行​

你可以使用 repeat() 函数来重复定义行。例如：

css
.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
}

在这个例子中，网格容器有三行，每行的高度都是 100px。

实际案例​

案例1：创建响应式布局​

假设你想创建一个响应式布局，其中第一行的高度固定为 100px，第二行和第三行的高度根据内容自动调整。你可以这样写：

css
.grid-container {
  display: grid;
  grid-template-rows: 100px auto auto;
}

案例2：使用 fr 单位创建比例布局​

假设你想创建一个三行布局，其中第二行的高度是其他两行的两倍。你可以这样写：

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

案例3：使用 minmax() 函数创建灵活布局​

假设你想创建一个两行布局，其中第一行的高度至少为 100px，但可以根据内容自动扩展，第二行的高度固定为 200px。你可以这样写：

css
.grid-container {
  display: grid;
  grid-template-rows: minmax(100px, auto) 200px;
}

总结​

grid-template-rows 是CSS网格布局中一个非常强大的属性，允许你精确控制网格行的高度和布局。通过使用固定值、fr 单位、minmax() 函数和 repeat() 函数，你可以创建出灵活且响应式的布局。

附加资源与练习​

  • 练习1：创建一个四行网格布局，其中第一行和第四行的高度为 50px，第二行和第三行的高度为 1fr。
  • 练习2：使用 minmax() 函数创建一个两行网格布局，其中第一行的高度至少为 100px，但可以根据内容自动扩展，第二行的高度固定为 150px。
  • 附加资源：阅读 MDN文档 以了解更多关于 grid-template-rows 的详细信息。
提示

提示：在实际项目中，结合 grid-template-columns 和 grid-template-rows 可以创建出更加复杂和灵活的布局。