使用 repeat() 函数可高效定义网格行高。例如 repeat(3, 100px) 创建3行各100px，等同于手动书写三段100px；结合fr单位如repeat(4, 1fr)实现四行均分容器高度；支持混合设置，如50px repeat(3, 80px) 1fr表示首行50px、三行80px、末行占剩余空间；通过minmax(60px, auto)确保最小高度且内容自适应；还可用于响应式布局，如repeat(2, minmax(0, 1fr)) 50px使前两行弹性分配空间、底部固定50px。掌握 repeat() 能显著简化代码，提升布局效率。
使用 CSS 的 grid-template-rows 配合 repeat() 函数，可以快速定义网格容器中多行的高度，尤其适合创建等高或规律变化的行布局。
基本语法
repeat() 函数用于重复某种模式的行高设置，语法如下：
grid-template-rows: repeat(重复次数, 行高值);
例如，创建 3 行，每行高度为 100px：
.container { display: grid; grid-template-rows: repeat(3, 100px);}
这等同于手动写：
立即学习“前端免费学习笔记（深入）”；
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情
grid-template-rows: 100px 100px 100px;
灵活设置不同行高
repeat() 不仅能重复固定值，还能结合其他单位或函数使用。使用 fr 单位均分剩余空间： “`css grid-template-rows: repeat(4, 1fr); “` 创建 4 行，每行占容器高度的 1/4。混合使用不同高度： “`css grid-template-rows: 50px repeat(3, 80px) 1fr; “` 第一行 50px，接着 3 行各 80px，最后一行占据剩余空间。使用 minmax() 控制最小最大高度： “`css grid-template-rows: repeat(2, minmax(60px, auto)); “` 创建两行，每行至少 60px，内容多时自动撑开。
响应式与自适应技巧
结合 auto-fit 或 auto-fill 虽主要用于列，但行方向也可通过逻辑控制实现动态行数。更常见的是配合 minmax 和 fr 实现弹性布局。
例如让内容行自动适应，底部留出固定高度：
.container { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)) 50px;}
前两行平分可用空间（内容可滚动时也有效），最后一行固定 50px。
基本上就这些。掌握 repeat() 能大幅简化网格行的定义，减少重复代码，提升布局效率。
以上就是如何通过css grid-template-rows repeat函数设置行高的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1070632.html
微信扫一扫 
支付宝扫一扫 
