当前位置：首页 > 文章列表 > 文章 > 前端 > CSS中grid-template-rows与grid-auto-rows详解

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

2025-10-21 13:30:28 0浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《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 高的行中。