grid-template-rows用于定义网格行高，支持px、fr、auto等单位，可结合minmax()和repeat()实现灵活布局，需注意隐式网格由grid-auto-rows控制。
在CSS Grid布局中，grid-template-rows 属性用于定义网格容器中每一行的高度。通过它，你可以精确控制每行的尺寸，从而实现灵活且响应式的页面结构。
基本语法
使用 grid-template-rows 时，你为每一行指定一个高度值，多个值之间用空格分隔：
grid-template-rows: 100px 50px auto;
这表示第一行高100px，第二行为50px，第三行自动填充内容所需高度。
常用单位和取值方式
你可以使用多种单位来设置行高，适应不同布局需求：
立即学习“前端免费学习笔记（深入）”；
固定单位：如 px、cm、em 等，适合固定高度场景 auto：根据内容自动调整高度 fr 单位：表示可用空间的份数，例如 1fr 就是均分一份 min-content / max-content：根据最小或最大内容需求决定高度 minmax()：设定最小和最大范围，比如 minmax(50px, 1fr)
示例：
grid-template-rows: 80px minmax(60px, 1fr) auto;
第一行固定80px，第二行至少60px但可扩展，第三行由内容决定。
Seede AI
AI 驱动的设计工具
586 查看详情
实用技巧与常见用法
在实际开发中，合理设置行高有助于构建清晰的界面层次：
使用 fr 单位实现“头部固定 + 内容区域自适应”的布局 结合 auto-fit 或 auto-fill 配合 repeat() 函数动态生成行 利用 minmax() 防止内容溢出或空白过多
比如让两行平均分配剩余空间：
grid-template-rows: 100px 1fr 1fr;
第一行为固定导航栏，下面两行等高伸展。
注意事项
如果定义的行数少于实际网格项所需的行数，多余项会自动放置到隐式网格中（由 grid-auto-rows 控制）。若想完全掌控所有行高，建议同时设置 grid-auto-rows 避免意外布局。
基本上就这些。掌握 grid-template-rows 能让你更自由地控制纵向空间分配，是Grid布局的核心技能之一。不复杂但容易忽略细节。
以上就是css布局grid-template-rows控制行高的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1067993.html
微信扫一扫 
支付宝扫一扫 
