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

基本语法

repeat() 函数用于重复某种模式的行高设置，语法如下：

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

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

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

这等同于手动写：

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

Pixelfox AI

多功能AI图像编辑工具

428

查看详情

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 ai 响应式布局 弹性布局 css auto