CSS Grid布局为页面结构控制提供了强大的二维轨道能力，其中grid-template-rows属性专门用于定义网格容器中每一行轨道的高度。通过将多个行轨道设置为相同的高度值或相同的弹性比例，开发者可以轻松实现所有网格行等高的效果，无需再借助浮动、绝对定位或脚本测量等传统手段。该属性既可以接受固定像素值，也可以使用百分比、fr弹性单位以及repeat函数等简写形式，因此在响应式布局和自适应内容场景中具有很高的实用价值。
grid-template-rows基础概念
grid-template-rows属性定义的是网格容器的显式行轨道高度，它必须配合display: grid或display: inline-grid使用。该属性的完整值是一个以空格分隔的轨道尺寸列表，列表中的每一个值都会依次对应网格中的第一行、第二行、第三行，以此类推。例如，设置grid-template-rows: 100px 200px 150px;会生成三个高度分别为100像素、200像素和150像素的行轨道。
下面的代码展示了这种不等高的基础用法：
.container {
display: grid;
grid-template-rows: 100px 200px 150px;
}
从上面的示例可以看出，三行高度并不相同，因此行内容较短或较长时，各行视觉高度会有明显差异。若要实现等高，最直接的做法就是把三个行轨道的尺寸设置为同一个值，例如都设置为120px。除此之外，还可以使用fr单位让行轨道按比例分配容器高度，或者使用repeat函数减少重复书写。
grid-template-rows支持的长度单位包括像素、百分比、rem、em、vw、vh等，也支持min-content、max-content、auto等关键字。其中auto会根据行内内容自动计算高度，因此它本身并不是精确等高场景下的首选，但在理解等高配置时，了解这些取值能够帮助开发者更准确地判断不同设置之间的差异。
实现等高行的核心配置方式
实现等高行有多种方式，可以根据实际需求选择固定长度、fr弹性单位或者repeat函数。三种方式的核心思路相同，都是让所有行轨道拥有相同的尺寸定义，区别只在于是否具备弹性以及代码是否简洁。下面分别介绍这些常用方法。
方式一：使用固定长度单位
如果已经明确每一行需要的高度，那么直接使用固定长度单位是最直观的方法。把多个相同的高度值依次写在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>
在这个示例中，三行的高度都被固定为120px，即使第二行的文本内容明显多于其他行，行的轨道高度也不会改变；如果内容超出轨道高度，还需要结合overflow属性来处理溢出，这部分会在后文说明。
方式二：使用fr单位
fr是CSS Grid布局中特有的分数单位，它表示网格容器中可用空间的比例份额。当容器具有明确的高度时，给所有行轨道设置相同的fr值，例如1fr 1fr 1fr，可以让所有行平分容器的剩余高度。这种方式比固定像素更加灵活，适合需要随容器高度变化而保持等高比例的响应式布局。
示例代码：
/* 容器高度固定为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;
}
需要注意的是，如果容器没有设置固定高度，fr单位的分配依据会变为内容撑开后的可用空间，此时各行的实际高度可能仍然会受到内容影响而变得不一致。因此，使用fr实现动态等高时，通常需要为容器设置一个明确的高度或最小高度。
方式三：使用repeat函数简化写法
当行数较多时，重复书写大量相同值既繁琐又容易出错。CSS提供了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;
}
使用repeat函数并不会改变等高效果，它只是语法层面的简化。无论行数有多少，只要repeat的第二个参数是一个固定尺寸，所有对应行都会保持统一高度。
不同场景的适配说明
在实际项目中使用grid-template-rows实现等高行时，还需要考虑容器高度、内容溢出以及隐式网格等因素。如果忽略这些细节，等高效果可能会在特定场景下失效或出现不可预期的表现。
首先，当网格容器没有设置固定高度且使用fr单位时，行轨道的高度会基于内容自动分配，因此行与行之间可能不再严格相等。解决办法是为网格容器设置height、min-height或使用固定像素作为行高。其次，如果某一行的内容特别长，默认情况下内容会溢出网格轨道，即使行高相等，视觉上也可能出现内容越过边界的情况。此时可以给网格子项设置overflow: hidden来裁剪溢出内容，或者设置word-break: break-all让长单词或长文本在行内换行。需要注意的是，这些处理只影响内容显示，不会改变行轨道本身的高度。
另外，如果网格中出现的行数超过了grid-template-rows定义的行数，多余的行会被视为隐式网格行，它们的高度由grid-auto-rows控制，而不是grid-template-rows。因此，如果希望所有行包括自动产生的行也保持等高，需要同时为grid-auto-rows设置相同的尺寸。
- 如果网格容器没有设置固定高度，使用fr单位时行的高度会根据内容自适应，此时需要给容器设置明确高度才能保证等高效果。
- 如果行内存在超长内容，默认情况下内容会溢出网格行，需要给网格子项设置
overflow: hidden或者word-break: break-all来处理溢出问题。 - 如果同时设置了grid-template-rows和grid-auto-rows，自动生成的隐式行不会遵循grid-template-rows的等高规则，需要单独设置grid-auto-rows的值来保证隐式行也等高。
这些场景在实际开发中比较常见，理解它们有助于避免在调试等高布局时陷入误区。
常见问题解答
为什么设置了grid-template-rows等高等高效果不生效
如果发现等高设置没有按预期工作，可以按照以下顺序逐一排查。首先确认容器是否已经设置了display: grid或display: inline-grid，因为grid-template-rows只对网格容器生效。其次检查是否在网格子项上设置了固定高度，例如给子项写了height: 200px;，这种子项自身的尺寸设置会覆盖轨道高度的表现，导致该行实际显示高度与设定值不同。此外，还要注意其他CSS规则是否通过更高优先级的选择器修改了grid-template-rows的值。
另一个容易被忽略的原因是隐式行与显式行混用。如果实际行数多于grid-template-rows中值的个数，多出来的行会自动采用grid-auto-rows的高度，因此即使显式行等高，隐式行也可能不等高，需要分别设置。
等高行之间如何设置间距
在网格布局中，行间距可以通过grid-row-gap属性或简写属性gap来设置。为行添加间距不会影响行轨道本身的高度，只是在相邻行之间插入空白区域，因此等高效果不会因为设置了间距而改变。例如，gap: 15px 0;表示行间距为15像素，列间距为0。
示例：
.equal-rows-with-gap {
display: grid;
grid-template-rows: repeat(3, 100px);
gap: 15px 0; /* 行间距15px，列间距0 */
}
在实际布局中，如果需要同时控制行间距和列间距，可以使用两个值的gap写法；如果行间距和列间距相同，也可以直接写一个值。
总的来说，使用grid-template-rows实现等高行并不复杂，关键是根据场景选择合适的取值方式：固定长度适合尺寸固定的布局，fr单位适合弹性分配容器高度，repeat函数则可以大幅简化多行等高时的代码书写。在编写样式时，还需要注意容器高度、内容溢出以及隐式行轨道等细节，这样才能确保等高布局在不同屏幕尺寸和内容变化下都保持稳定。
css_gridgrid-template-rows等高行网格布局修改时间：2026-07-15 08:36:24