CSS 网格模板行
CSS网格布局(CSS Grid Layout)是一种强大的布局系统,允许开发者以二维方式创建复杂的网页布局。其中,grid-template-rows
属性用于定义网格容器中行的数量和大小。通过掌握 grid-template-rows
,你可以精确控制网格行的布局,从而创建出灵活且响应式的设计。
什么是 grid-template-rows
?
grid-template-rows
是CSS网格布局中的一个属性,用于定义网格容器中每一行的高度。你可以为每一行指定一个固定值、百分比值、或者使用 fr
单位(分数单位)来分配可用空间。此外,你还可以使用 minmax()
函数来设置行的最小和最大高度。
基本语法
grid-template-rows: <track-size> ...;
<track-size>
:可以是长度值(如px
、em
)、百分比值、fr
单位,或者minmax()
函数。
示例
以下是一个简单的示例,展示了如何使用 grid-template-rows
定义一个三行网格:
.grid-container {
display: grid;
grid-template-rows: 100px 200px 150px;
}
在这个示例中,网格容器被分为三行,高度分别为 100px
、200px
和 150px
。
逐步讲解
1. 定义固定高度的行
你可以为每一行指定一个固定的高度。例如:
.grid-container {
display: grid;
grid-template-rows: 50px 100px 75px;
}
在这个例子中,网格容器有三行,高度分别为 50px
、100px
和 75px
。
2. 使用 fr
单位分配空间
fr
单位(分数单位)允许你根据可用空间按比例分配行的高度。例如:
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr;
}
在这个例子中,网格容器有三行,第二行的高度是其他两行的两倍。
3. 使用 minmax()
函数
minmax()
函数允许你为行设置最小和最大高度。例如:
.grid-container {
display: grid;
grid-template-rows: minmax(100px, auto) 200px;
}
在这个例子中,第一行的高度至少为 100px
,但可以根据内容自动扩展。第二行的高度固定为 200px
。
4. 重复行
你可以使用 repeat()
函数来重复定义行。例如:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
}
在这个例子中,网格容器有三行,每行的高度都是 100px
。
实际案例
案例1:创建响应式布局
假设你想创建一个响应式布局,其中第一行的高度固定为 100px
,第二行和第三行的高度根据内容自动调整。你可以这样写:
.grid-container {
display: grid;
grid-template-rows: 100px auto auto;
}
案例2:使用 fr
单位创建比例布局
假设你想创建一个三行布局,其中第二行的高度是其他两行的两倍。你可以这样写:
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr;
}
案例3:使用 minmax()
函数创建灵活布局
假设你想创建一个两行布局,其中第一行的高度至少为 100px
,但可以根据内容自动扩展,第二行的高度固定为 200px
。你可以这样写:
.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
可以创建出更加复杂和灵活的布局。