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

grid-template-rows与grid-auto-rows区别详解

2025-12-06 18:55:36 0浏览收藏

**CSS Grid 布局详解：grid-template-rows 与 grid-auto-rows 的妙用** 想轻松掌握 CSS Grid 布局？本文深入解析 `grid-template-rows` 和 `grid-auto-rows` 属性，助你构建更灵活的网格系统。`grid-template-rows` 用于定义显式网格行的固定高度，精确控制已知行高；而 `grid-auto-rows` 则负责设置隐式生成行的默认高度，处理超出显式定义的网格项。巧妙结合两者，可实现首行特殊、后续统一的布局效果，例如仪表盘标题与卡片排列。更可配合 `minmax()` 函数，让自动生成的行高更具弹性，适应不同内容高度。掌握这两个属性的用法，让你在动态网格场景中游刃有余！

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 高的行中。