CSSGrid行高调整技巧分享

今天golang学习网给大家带来了《CSS Grid行高控制技巧》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

grid-template-rows用于定义网格行高，支持px、fr、auto等单位，可结合minmax()和repeat()实现灵活布局，需注意隐式网格由grid-auto-rows控制。

在CSS Grid布局中，grid-template-rows 属性用于定义网格容器中每一行的高度。通过它，你可以精确控制每行的尺寸，从而实现灵活且响应式的页面结构。

基本语法

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

这表示第一行高100px，第二行为50px，第三行自动填充内容所需高度。

常用单位和取值方式

你可以使用多种单位来设置行高，适应不同布局需求：

• 固定单位：如 px、cm、em 等，适合固定高度场景
• auto：根据内容自动调整高度
• fr 单位：表示可用空间的份数，例如 1fr 就是均分一份
• min-content / max-content：根据最小或最大内容需求决定高度
• minmax()：设定最小和最大范围，比如 minmax(50px, 1fr)

示例：

第一行固定80px，第二行至少60px但可扩展，第三行由内容决定。

实用技巧与常见用法

在实际开发中，合理设置行高有助于构建清晰的界面层次：

• 使用 fr 单位实现“头部固定 + 内容区域自适应”的布局
• 结合 auto-fit 或 auto-fill 配合 repeat() 函数动态生成行
• 利用 minmax() 防止内容溢出或空白过多

比如让两行平均分配剩余空间：

第一行为固定导航栏，下面两行等高伸展。

注意事项

如果定义的行数少于实际网格项所需的行数，多余项会自动放置到隐式网格中（由 grid-auto-rows 控制）。若想完全掌控所有行高，建议同时设置 grid-auto-rows 避免意外布局。

基本上就这些。掌握 grid-template-rows 能让你更自由地控制纵向空间分配，是Grid布局的核心技能之一。不复杂但容易忽略细节。

理论要掌握，实操不能落！以上关于《CSSGrid行高调整技巧分享》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！