使用 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);
}这等同于手动写：
立即学习“前端免费学习笔记（深入）”；
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() 能大幅简化网格行的定义，减少重复代码，提升布局效率。
