CSS Grid布局是CSS3推出的强大二维布局方案，grid-template-rows是其中用于定义网格容器行轨道尺寸的核心属性，通过给该属性设置统一的固定值或者比例值，就可以轻松实现所有网格行等高的效果，不需要额外的hack手段。
grid-template-rows基础概念
grid-template-rows用于指定网格布局中每一行的高度，属性值可以是一个或多个长度单位、百分比、fr单位或者auto等关键字，多个值之间用空格分隔，每个值对应一行网格轨道。
比如下面的代码定义了一个3行的网格容器，三行的高度分别是100px、200px、150px：
.container {
display: grid;
grid-template-rows: 100px 200px 150px;
}
实现等高行的核心配置方式
方式一：使用固定长度单位
如果明确知道每行需要的具体高度，直接给grid-template-rows设置多个相同的固定长度值即可，所有行的高度会完全一致。
示例代码如下：
/* 定义3行等高的网格，每行高度都是120px */
.equal-height-rows {
display: grid;
grid-template-rows: 120px 120px 120px;
gap: 10px;
}
/* 网格子项基础样式 */
.grid-item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
对应的HTML结构：
<div class="equal-height-rows"> <div class="grid-item">第一行内容</div> <div class="grid-item">第二行内容，内容多少不影响行高</div> <div class="grid-item">第三行内容</div> </div>
方式二：使用fr单位
fr是Grid布局特有的分数单位，代表网格容器中剩余空间的分配比例，给所有行设置相同的fr值，就可以让所有行平分容器的可用高度，实现动态等高效果。
示例代码如下：
/* 容器高度固定为400px，3行平分高度，每行约133.33px */
.dynamic-equal-rows {
display: grid;
height: 400px;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}
.grid-item {
background-color: #e8f4ff;
padding: 15px;
}
方式三：使用repeat函数简化写法
当需要定义多行等高时，重复写多个相同的值会比较繁琐，可以使用repeat函数来简化代码，repeat的第一个参数是重复次数，第二个参数是每次重复的值。
示例代码如下：
/* 定义5行等高行，每行高度80px，等价于写5个80px */
.repeat-equal-rows {
display: grid;
grid-template-rows: repeat(5, 80px);
gap: 8px;
}
.grid-item {
background-color: #f5f5f5;
padding: 10px;
}
不同场景的适配说明
- 如果网格容器没有设置固定高度，使用fr单位时行的高度会根据内容自适应，此时需要给容器设置明确高度才能保证等高效果
- 如果行内存在超长内容，默认情况下内容会溢出网格行，需要给网格子项设置
overflow: hidden或者word-break: break-all来处理溢出问题 - 如果同时设置了grid-template-rows和grid-auto-rows，自动生成的隐式行不会遵循grid-template-rows的等高规则，需要单独设置grid-auto-rows的值来保证隐式行也等高
常见问题解答
为什么设置了grid-template-rows等高等高效果不生效
首先检查容器是否设置了display: grid，只有网格容器才会识别grid-template-rows属性。其次检查是否有其他样式覆盖了行高设置，比如给网格子项设置了固定高度，会优先于网格轨道的高度设置。
等高行之间如何设置间距
可以使用grid-row-gap属性或者gap属性来设置行之间的间距，间距不会影响行的等高效果，只是会在行之间添加空白间隔。
示例：
.equal-rows-with-gap {
display: grid;
grid-template-rows: repeat(3, 100px);
gap: 15px 0; /* 行间距15px，列间距0 */
}
css_gridgrid-template-rows等高行网格布局修改时间：2026-07-15 08:36:24