跳到主要内容

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>:可以是长度值(如 pxem)、百分比值、fr 单位,或者 minmax() 函数。

示例

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

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

在这个示例中,网格容器被分为三行,高度分别为 100px200px150px

逐步讲解

1. 定义固定高度的行

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

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

在这个例子中,网格容器有三行,高度分别为 50px100px75px

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-columnsgrid-template-rows 可以创建出更加复杂和灵活的布局。