隐式行轨道属性

最后更新：2026-09-13

grid-auto-rows 隐式行轨道属性

grid-auto-rows 用于控制网格容器中隐式生成的行轨道的高度。当网格项被放置到 grid-template-rows 未显式定义的行位置时，会自动创建隐式行，该属性决定了这些自动行的高度。它确保未显式定义的行也能有统一的尺寸表现。

grid-auto-rows: <track-size>;

值	类型	描述
`auto`	关键字	自动计算
`<length> \| <percentage>`	类型	固定自动行高

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

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

提示： 设置 grid-auto-rows: auto 会让隐式行高度完全由内容决定，可能导致行高不一致。

提示： 使用 minmax(80px, auto) 可以保证最小高度的同时让内容较多的行自动增高。

Qgrid-auto-rows 的默认值是什么？

A默认值为 auto，即隐式行的高度由该行中最高的网格项内容决定。这也是为什么不写 grid-auto-rows 时，多行网格的各行高度会随内容变化。需要统一行高时，显式设置 grid-auto-rows: 100px 或 minmax(100px, auto) 即可覆盖默认行为。

Q如何让所有行高度一致？

A设置 grid-auto-rows: 1fr 或固定高度值（如 100px），可以让隐式行与显式行保持统一高度。1fr 适合行高随容器变化的自适应场景，固定值适合卡片等需要整齐一致的列表。若行数固定、结构明确，直接用 grid-template-rows 定义所有行更清晰。

Qgrid-auto-rows: minmax(100px, auto) 是什么意思？

Aminmax 定义行高范围：最小值 100px、最大值 auto（随内容伸展），即每行高度至少 100px，内容超过时自动加高，不会裁剪内容。相比固定高度，minmax(100px, auto) 兼顾卡片整齐与内容安全；相比纯 auto，能避免内容很少时行高过矮、视觉稀松。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。