CSSGrid行高优化技巧分享

**CSS Grid 行高设置技巧：打造灵活响应式布局** 在使用 CSS Grid 布局时，`grid-template-rows` 属性是控制网格行高的关键。本文详细介绍了 `grid-template-rows` 的各种用法，包括使用像素、百分比等固定值，以及 em、rem 等相对单位，实现不同屏幕尺寸下的自适应行高。此外，还重点讲解了 `fr` 单位的灵活运用，它可以将剩余空间按比例分配给各行，轻松实现弹性布局。`auto` 关键字则能让行高根据内容自动调整，非常适合页头页脚等场景。最后，利用 `repeat()` 函数可以简化重复行高的设置，提高代码效率。掌握这些 CSS Grid 行高设置技巧，助你高效构建各种复杂且响应式的网页布局。

grid-template-rows用于定义网格行高，支持像素、百分比、fr、auto等单位；2. 可用固定值、相对单位或fr分配空间，结合repeat简化重复设置，实现灵活布局。

CSS 的 grid-template-rows 属性用于定义网格容器中每一行的高度。你可以通过多种方式灵活设置行高，满足不同布局需求。

固定高度设置

可以直接为每一行指定具体的像素值或其他绝对单位。

.container {
  display: grid;
  grid-template-rows: 100px 50px 80px;
}

上面代码创建了三行，高度分别为 100px、50px 和 80px。

使用相对单位

可以用百分比（%）、em、rem 等相对单位来设置行高，使布局更具响应性。

.container {
  display: grid;
  grid-template-rows: 20% 60% 20%;
}

整个网格高度基于容器，三行分别占 20%、60%、20%。

fr 单位分配剩余空间

fr（fraction）单位表示可用空间的份数，非常适合弹性布局。

.container {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
}

总共有 4 份，第二行占 2 份，第一和第三行各占 1 份，自动均分容器高度。

结合 auto 关键字

使用 auto 可让某一行根据内容自动调整高度。

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

首尾行根据内容自适应，中间行填满剩余空间，适合页头、主体、页脚布局。

重复行高设置（repeat）

当多行需要相同高度时，用 repeat() 更简洁。

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

生成三行，每行 100px 高。

基本上就这些常用方法。根据实际布局选择合适的单位组合，能高效实现各种行高控制。

终于介绍完啦！小伙伴们，这篇关于《CSSGrid行高优化技巧分享》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！