CSSgrid行高设置技巧

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《CSS grid-template-rows设置行高方法》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

使用 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() 能大幅简化网格行的定义，减少重复代码，提升布局效率。

今天关于《CSSgrid行高设置技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！