CSS grid-template-rows 属性

CSS grid-template-rows 语法

在 CSS 中，grid-template-rows 用于定义网格容器的行轨道结构，即显式指定每一行的高度。

语法：

grid-template-rows: none | 值列表 | 函数;

说明：

grid-template-rows 属性默认值是 none，此时表示没有显式定义的行。网格将仅创建隐式网格行，其尺寸由 grid-auto-rows 属性决定。

grid-template-rows 属性取值可以是一个值列表，也可以是一个函数（一般是 repeat()）。如果 grid-template-rows 取值为 “值列表” ，那么每个值代表的是一个行的宽度。有多少行，就应该提供多少个值，比如：

grid-template-rows: 100px 100px 100px;
grid-template-rows: 1fr 1fr 1fr;

其中，对于值列表的每个值来说，它的值可以是：

长度值：比如 px、em、rem、百分比（%）等。
fr 值：fr 是一个弹性单位，表示占据剩余空间的比例。例如，grid-template-rows: 1fr 2fr; 表示两行，第二行是第一行高度的两倍。
min-content：行的高度将根据其内容所需的最小高度来确定，不会溢出内容。
max-content：行的高度将根据其内容所需的最大高度来确定，能完整容纳内容。
auto：自动高度，根据内容大小动态调整。

如果 grid-template-rows 取值为函数，此时它是使用 repeat() 函数来结合 auto-fill 或 auto-fit 关键字以及 minmax() 函数，用于创建响应式和自适应的列。

此外，小伙伴们还需要清楚以下几点。

grid-template-rows 定义的是显式网格的行。如果你把子项放在显式网格之外时，则会自动创建隐式行，其高度由 grid-auto-rows 控制。
grid-template-rows 通常需要搭配 grid-template-columns、grid-template-areas 等属性一起使用。

注意: grid-template-rows 属性只能应用于网格容器本身，即定义了 display 取值为 grid 或 inline-grid 的元素。

CSS grid-template-rows 摘要

属于	CSS grid 布局
使用频率	高
是否继承	否
默认值	none
兼容性	查看
官方文档	查看
MDN	查看

CSS grid-template-rows 示例

接下来，我们通过一个简单的例子来讲解一下 CSS grid-template-rows 属性是如何使用的。

示例 1：grid-template-rows 使用固定数值

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            width: 300px;
            height: 300px;
            background-color: lightskyblue;
        }
        .container > div {
            box-sizing: border-box;
            border: 1px dashed gray;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

页面效果如下图所示。

grid-template-rows 使用固定数值

分析：

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    ……
}

display: grid; 表示父元素内部使用的是 grid 布局。grid-template-columns: 100px 100px 100px; 表示将整个区域定义成 3 列，每一列宽度为 100px。

grid-template-rows: 100px 100px 100px; 表示将整个区域定义成 3 行，每一行高度为 100px。由于父元素的尺寸为 300px×300px，所以刚好划分为 3×3 个子项（单元格）。

示例 2：grid-template-rows 使用 fr 单位

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .container > div {
            box-sizing: border-box;
            border: 1px dashed gray;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

页面效果如下图所示。

grid-template-rows使用fr单位

分析：

grid-template-columns: 1fr 1fr 1fr; 表示将父元素宽度平均分为 3 列，由于父元素的 width 等于 300px，所以每一列宽度为 100px。而 grid-template-rows: 1fr 1fr 1fr; 表示将父元素高度平均分为 3 行，由于父元素的 height 也为 300px，所以每一行高度为 100px。

对于这个例子来说，下面两种写法是等价的。但是写法 1 简单方便很多，因为它无需手动计算每一列的宽度或每一行的高度。

/* 写法 1 */
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;

/* 写法 2 */
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;