首页 > 文章 > 前端

CSSgrid行高设置技巧分享

时间：2025-12-20 10:47:36 321浏览收藏

推广推荐

支持 PC / 移动端，安全直达

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS中grid-template-rows设置行高方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

grid-template-rows用于定义网格行高，支持px、%、auto、fr等单位，可使用repeat()简化重复值，如60px 1fr 40px实现固定与自适应混合布局。

在css中如何用grid-template-rows控制行高

在 CSS Grid 布局中，grid-template-rows 属性用于定义网格容器中每一行的高度。你可以通过它精确控制每行的尺寸，适应内容或固定布局需求。

使用 grid-template-rows 时，为每一行指定一个高度值，多个值用空格分隔：

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

这表示第一行高 100px，第二行为 50px，第三行根据内容自动调整。

你可以使用多种单位来设置行高：

假设你有一个三行布局，顶部导航栏固定 60px，中间内容区域占满剩余空间，底部固定 40px：

.container {
  display: grid;
  grid-template-rows: 60px 1fr 40px;
  height: 100vh;
}

这里 1fr 让中间行自动填充除去顶部和底部后的所有可用高度。

如果有多行相同高度，可以用 repeat() 简化：

grid-template-rows: repeat(3, 100px);

等同于：100px 100px 100px

也可以混合使用，例如：

grid-template-rows: 50px repeat(2, 1fr) 60px;

表示第一行 50px，接下来两行各占 1fr，最后一行 60px。

基本上就这些。合理使用 grid-template-rows 能让你轻松实现灵活且响应式的行高控制。不复杂但容易忽略细节，比如容器是否有明确高度，否则 fr 单位可能无法正确计算。

本篇关于《CSSgrid行高设置技巧分享》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！