grid-template-rows用于定义网格行高，支持像素、百分比、fr、auto等单位；2. 可用固定值、相对单位或fr分配空间，结合repeat简化重复设置，实现灵活布局。
CSS 的 grid-template-rows 属性用于定义网格容器中每一行的高度。你可以通过多种方式灵活设置行高，满足不同布局需求。
固定高度设置
可以直接为每一行指定具体的像素值或其他绝对单位。
.container { display: grid; grid-template-rows: 100px 50px 80px;}
上面代码创建了三行，高度分别为 100px、50px 和 80px。
使用相对单位
可以用百分比（%）、em、rem 等相对单位来设置行高，使布局更具响应性。
立即学习“前端免费学习笔记（深入）”；
.container { display: grid; grid-template-rows: 20% 60% 20%;}
整个网格高度基于容器，三行分别占 20%、60%、20%。
fr 单位分配剩余空间
fr（fraction）单位表示可用空间的份数，非常适合弹性布局。
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
.container { display: grid; grid-template-rows: 1fr 2fr 1fr;}
总共有 4 份，第二行占 2 份，第一和第三行各占 1 份，自动均分容器高度。
结合 auto 关键字
使用 auto 可让某一行根据内容自动调整高度。
.container { display: grid; grid-template-rows: auto 1fr auto;}
首尾行根据内容自适应，中间行填满剩余空间，适合页头、主体、页脚布局。
重复行高设置（repeat）
当多行需要相同高度时，用 repeat() 更简洁。
.container { grid-template-rows: repeat(3, 100px);}
生成三行，每行 100px 高。
基本上就这些常用方法。根据实际布局选择合适的单位组合，能高效实现各种行高控制。
以上就是css grid-template-rows行高设置方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1009471.html
微信扫一扫 
支付宝扫一扫 
