网格行轨道属性

最后更新：2026-09-13

grid-template-rows 网格行轨道属性

grid-template-rows 用于定义网格容器中行轨道的数量和高度。通过指定每个行轨道的尺寸，你可以精确控制网格的行结构。它与 grid-template-columns 配合使用，共同构成网格的基本骨架，支持固定长度、百分比、fr 单位以及 minmax() 等函数。

分类
初始值	none
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

grid-template-rows: none | <track-list> | <auto-track-list>;

⚙️ 取值

值	类型	描述
`none`	关键字	无显式行轨道
`<track-list>`	类型	行轨道列表

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
grid-template-rows	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： 配合容器固定高度使用时，1fr 可以让中间行自动填满剩余空间，是经典页面布局的常用技巧。

提示： auto 关键字让行高根据内容自动调整，适合高度不固定的行。

❓ 常见问题

Qgrid-template-rows 需要容器有固定高度吗？

A不一定。容器没有显式高度时，行轨道高度默认 auto，由该行内最高的网格项内容撑开；只有用 fr 等单位按比例分配行高时，容器才需要明确高度作为计算基准，否则 fr 会退化为内容高度。整页布局常给容器 height: 100vh 或固定高度，配合 auto 1fr auto 实现页头、主体、页脚经典骨架。

Q如何让行高随内容自适应？

A把行轨道尺寸写成 auto（或直接省略 grid-template-rows），行高由该行内容决定，内容多则行变高。若想限制最小高度，可写 grid-auto-rows: minmax(100px, auto)，表示最小 100px、内容超过后随内容伸展。注意 fr 单位会让行按比例均分高度，无法自适应内容。

Qgrid-template-rows: auto 1fr auto 在整页布局中是什么意思？

A这是经典的页头-主体-页脚布局：第一行 auto 高度由页头内容决定，第二行 1fr 吸收容器所有剩余高度（主体区域随容器伸缩），第三行 auto 由页脚内容决定。配合 grid-template-columns 与容器 height: 100vh，可实现主体自适应、页头页脚不溢出的整页骨架。