如何通过css grid-template-rows repeat函数设置行高

使用 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() 函数，可以快速定义网格容器中多行的高度，尤其适合创建等高或规律变化的行布局。

基本语法

grid-template-rows: repeat(重复次数, 行高值);

例如，创建 3 行，每行高度为 100px：

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
}

这等同于手动写：

立即学习“前端免费学习笔记（深入）”；

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

grid-template-rows: 100px 100px 100px;

灵活设置不同行高

• 使用 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，内容多时自动撑开。

响应式与自适应技巧

例如让内容行自动适应，底部留出固定高度：

.container {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr)) 50px;
}

前两行平分可用空间（内容可滚动时也有效），最后一行固定 50px。

基本上就这些。掌握 repeat() 能大幅简化网格行的定义，减少重复代码，提升布局效率。

以上就是如何通过css grid-template-rows repeat函数设置行高的详细内容，更多请关注php中文网其它相关文章！