CSSgrid行高设置技巧分享

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS中grid-template-rows设置行高方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

grid-template-rows用于定义网格行高，支持px、%、auto、fr等单位，可使用repeat()简化重复值，如60px 1fr 40px实现固定与自适应混合布局。

在 CSS Grid 布局中，grid-template-rows 属性用于定义网格容器中每一行的高度。你可以通过它精确控制每行的尺寸，适应内容或固定布局需求。

基本语法

使用 grid-template-rows 时，为每一行指定一个高度值，多个值用空格分隔：

这表示第一行高 100px，第二行为 50px，第三行根据内容自动调整。

常用单位和值

你可以使用多种单位来设置行高：

• 像素（px）：固定高度，适合精确控制
• 百分比（%）：相对于网格容器的高度
• auto：根据内容自动调整高度
• fr 单位：按比例分配剩余空间，比如 1fr、2fr
• min-content / max-content：根据最小或最大内容所需空间设定高度

实际示例

假设你有一个三行布局，顶部导航栏固定 60px，中间内容区域占满剩余空间，底部固定 40px：

这里 1fr 让中间行自动填充除去顶部和底部后的所有可用高度。

重复和紧凑写法

如果有多行相同高度，可以用 repeat() 简化：

等同于：100px 100px 100px

也可以混合使用，例如：

表示第一行 50px，接下来两行各占 1fr，最后一行 60px。

基本上就这些。合理使用 grid-template-rows 能让你轻松实现灵活且响应式的行高控制。不复杂但容易忽略细节，比如容器是否有明确高度，否则 fr 单位可能无法正确计算。

本篇关于《CSSgrid行高设置技巧分享》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！