CSS grid-template-rows 属性
CSS grid-template-rows 属性
简介
CSS grid-template-rows 属性用于定义网格容器中的行(rows)。该属性用于指定每一行的高度,可以使用长度值或百分比表示。
语法
grid-template-rows: none |
-
none:表示没有行高,通常用于自动分配行高的情况(auto fr)。
-
:表示一系列的行高,可以使用长度值、百分比或 fr 值表示。其中,百分比值是相对于网格容器的高度计算的,fr 值表示弹性网格轨道。 -
inherit:表示继承自父元素的行高设置。
其中:
-
是行高的宽度,可以使用长度值、百分比或 fr 值表示; -
是一个以空格分隔的行名称列表; -
? 表示可选项。
示例
以下示例定义了一个由三行组成的网格容器,第一行高度为100px,第二行高度为2/1(即原始大小的两倍),第三行高度为25%(相对于网格容器的高度计算):
.grid-container {
display: grid;
grid-template-rows: 100px 2fr 25%;
}
注意事项
-
如果网格容器设置了 grid-auto-rows 属性,则该属性会覆盖 grid-template-rows 属性中为自适应轨道分配的任何行高。
-
不同的网格轨道可能无法共享相同的行高。这通常发生在网格容器中出现大量的空白空间的情况下。
-
在使用 grid-template-rows 属性的同时,建议同时使用 grid-template-columns 属性,以扩展其布局功能。
总结
CSS grid-template-rows 属性用于定义网格容器中的行高,通过指定每一行的高度大小来进行布局,支持使用长度值、百分比和 fr 值进行设置。通过掌握网格布局的基本知识,可以快速实现网站的布局设计。