CSSgrid设置行高方法详解

**CSS Grid布局教程：grid-template-rows行高设置详解** 还在为CSS Grid布局中的行高控制烦恼吗？本文深入解析`grid-template-rows`属性，助你轻松掌握网格行高的设置技巧。从基本语法入手，详细讲解`px`、`%`、`auto`、`fr`等常用单位的用法，并通过实际示例演示如何实现固定、自适应和比例分配的混合布局。更有`repeat()`函数简化重复行高设置，提升代码效率。深入理解`grid-template-rows`，打造灵活且响应式的网页布局。立即学习，提升你的CSS Grid布局技能！

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学习网公众号，给大家分享更多文章知识！