CSS | grid-template-rows 属性

使用 grid-template-rows 属性可以定义网格容器中每一行的高度，从而确定网格的行数和每一行的大小。

语法

grid-template-rows: <track-size> | <line-name> <track-size> | minmax() | fit-content() | <track-list>

• track-size：可以是一个长度、百分比或者一个 fr 单位。
• line-name：可以是一个自定义的行名称。
• minmax()：定义一个限制范围，第一个参数为最小值，第二个参数为最大值。
• fit-content()：根据内容自适应的高度。
• track-list：可以是多个 track-size 或 line-name 的组合。

示例

1. 等高行

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

上面的代码将创建一个等高的网格容器，共有 3 行和 3 列，每一行的高度均为 100 像素。

2. 不规则高度行

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

上面的代码将创建一个不规则高度的网格容器，共有 3 行和 3 列。第一行高度为 100 像素，第二行占据剩余空间，第三行高度为 150 像素。

3. 自定义行名称

.grid-container {
  display: grid;
  grid-template-rows: [header] 100px [content] 1fr [footer] 50px;
  grid-template-columns: repeat(3, 1fr);
}

上面的代码将创建一个使用自定义行名称的网格容器，共有 3 行和 3 列。第一行的高度为 100 像素，并且使用了行名称 [header]，第二行占据剩余空间，并且使用了行名称 [content]，第三行的高度为 50 像素，并且使用了行名称 [footer]。

小结

grid-template-rows 属性是定义网格容器中每一行的高度，用于确定网格的行数和每一行的大小。它可以使用长度、百分比、fr 单位、自定义名称、限制范围和自适应大小等方式来定义每一行的大小。