Grid容器中implicit row和explicit row的区别_自动生成行解析-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-20 13:57:05

原创

759人浏览过

显式行由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 中声明的，而是由浏览器根据内容需要动态添加的。

Logome

AI驱动的Logo生成工具

133

查看详情

例如：

.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（内容高度）。