首页 > 文章 > 前端

CSS中grid-template-rows与grid-auto-rows详解

时间：2025-10-21 13:30:28 305浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《CSS中grid-template-rows与grid-auto-rows配合使用详解》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

grid-template-rows定义显式行高，grid-auto-rows控制隐式生成行的行高；前者用于精确设置已知行，后者处理超出部分的自动创建行，两者结合可实现首行特殊、后续统一的布局效果，如仪表盘标题与卡片排列，配合minmax()更灵活。

在css中grid-template-rows与grid-auto-rows配合

在 CSS Grid 布局中，grid-template-rows 和 grid-auto-rows 都用于控制网格行的高度，但它们作用的范围不同。理解它们如何配合使用，有助于更灵活地构建复杂的网格布局。

grid-template-rows：定义明确的行

这个属性用来显式定义网格容器中指定行的数量和尺寸。它适用于你提前知道有多少行，并希望精确控制这些行的高度。

例如：

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

这会创建两行，第一行高 100px，第二行高 50px。如果网格项只放在这两行内，那就够了。

grid-auto-rows：处理自动生成的行

当你放置的网格项超出了 grid-template-rows 定义的行数时，浏览器会自动创建额外的行，这些被称为“隐式网格行”。grid-auto-rows 就是用来设置这些自动生成行的高度。

比如：

.grid-container {
grid-template-rows: 100px;
grid-auto-rows: 60px;
}

第一行是 100px（由 template 控制），之后所有自动生成的行都是 60px 高。

两者如何配合使用

实际开发中，你可以结合两者实现前几行特殊布局，后续行统一规格的效果。

常见场景举例：

一个仪表盘，第一行是横跨全宽的标题区域（固定高度）
后面的内容卡片自动排列，每张卡片高度一致

CSS 示例：

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px; /* 第一行是标题 */
  grid-auto-rows: 100px; /* 后续行自动创建，统一高度 */
}

.item-header { grid-row: 1; }
.card:nth-child(n+2) { grid-row: auto; }

这样，第1个元素占第一行 80px，其余元素自动分配到新生成的 100px 高的行中。

小技巧：使用 minmax() 更灵活

你可以用 minmax() 让自动行更智能：

grid-auto-rows: minmax(100px, auto);

表示自动生成的行最小 100px，内容更高时自动撑开。

基本上就这些。掌握 grid-template-rows 控制定义行、grid-auto-rows 控制多余行的原则，就能轻松应对大多数动态网格场景。不复杂但容易忽略细节。

好了，本文到此结束，带大家了解了《CSS中grid-template-rows与grid-auto-rows详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！