Grid容器中implicit row和explicit row的区别_自动生成行解析

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Grid容器中implicit row和explicit row的区别_自动生成行解析

2025-11-20

浏览次数：次

返回列表

显式行由grid-template-rows定义，数量和尺寸固定；隐式行在内容超出时自动生成，数量不固定，高度由grid-auto-rows控制。

grid容器中implicit row和explicit row的区别_自动生成行解析

在CSS Grid布局中，explicit row（显式行）和implicit row（隐式行）是控制网格行生成的两种方式，它们的核心区别在于是否由开发者直接定义。

显式行（Explicit Rows）

显式行是通过 grid-template-rows 属性明确定义的行。你指定有多少行、每行的高度是多少，Grid容器就按这个结构创建对应的行轨道。

例如：

.container {
  display: grid;
  grid-template-rows: 100px 50px; /* 定义了2个显式行 */
}

上面代码创建了一个包含两行的网格：第一行高100px，第二行高50px。这些就是explicit rows。

隐式行（Implicit Rows）

当网格项的数量超过显式定义的行数时，Grid会自动创建额外的行来容纳这些项目，这些自动生成的行就是implicit rows。它们不是你在 grid-template-rows 中声明的，而是由浏览器根据内容需要动态添加的。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

例如：

.container {
  display: grid;
  grid-template-rows: 100px; /* 只定义1行 */
  grid-auto-rows: 80px;      /* 隐式行的高度 */
}
<p>/<em> 假设有3个子元素 </em>/
.item1 { grid-row: 1; }
.item2 { grid-row: 2; } /<em> 超出显式范围，触发隐式行 </em>/
.item3 { grid-row: 3; } /<em> 再次触发隐式行 </em>/</p>

这里只显式定义了一行，但有三个项目分别放在第1、2、3行。第2行和第3行就是implicit rows，它们的高度由 grid-auto-rows 控制，默认为 auto（内容高度）。