Html 为什么我的网格行跨1行，而我将它们设置为跨2行？

我有一个关于以下代码中网格行和跨度的问题：

.grid{
显示：网格；
网格模板列：重复（4，1fr）；
}
.项目{
填充：3rem；
边框：1px实心#ccc；
背景#f4；
字体大小：1.3rem；
字体大小：粗体；
文本对齐：居中；
}
.项目：第一个孩子{
格构柱：1/3跨；
网格行：1/2跨；
背景：蓝紫罗兰；
}
.项目：第n个孩子（9）{
格构柱：2/3跨；
网格行：2个/跨度2；
背景：红色；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14
项目15

在

.grid

样式块中，需要包含一个显式的

网格模板行

样式声明

一旦

.grid

明确包含多行，您对项目1和项目9的样式设置将起作用

例如

grid-template-rows: 1fr 1fr;

或者，正如@Paulie_D所建议的：

grid-template-rows: minmax(0, 1fr);

---

工作示例：

.grid{
显示：网格；
网格模板列：重复（4，1fr）；
网格模板行：1fr 1fr；
}
.项目{
填充：3rem；
边框：1px实心#ccc；
背景#f4；
字体大小：1.3rem；
字体大小：粗体；
文本对齐：居中；
}
.项目：第一个孩子{
格构柱：1/3跨；
网格行：1/2跨；
背景：蓝紫罗兰；
}
.项目：第n个孩子（9）{
格构柱：2/3跨；
网格行：2个/跨度2；
背景：红色；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14
项目15

先来点背景知识。 您没有定义明确的行。网格中的所有行都是隐式的

根据规范：

三个属性

网格模板行

，

网格模板列

， 和

栅格模板区域一起定义栅格的显式栅格
容器

换句话说，因为您没有使用
网格模板行
或
网格模板区域
，所以网格没有定义的行（即显式行），并且根据需要创建行（即隐式行）

从上述规范部分继续：

最终网格可能会因网格项目放置在外部而变大
显式网格；在这种情况下，将创建隐式轨迹，这些轨迹
隐式轨迹的大小将由
网格自动行
和
网格自动列
属性

好的，但是为什么
span 2
不将网格区域扩展到两行呢

事实上，是的


答复
网格规范有一条规则，指示浏览器在
网格模板列
、
网格模板行
和
网格模板区域
不存在时，始终在相关轴上创建一条网格线

再次参见第7.1节。以上：

如果这些属性未定义任何显式轨迹，则显式栅格将显示这些轨迹
仍然在每个轴中包含一条网格线

因此，仔细查看您的网格（在本例中，使用）将发现
span 2
工作正常，但是已经创建了一条额外的行，因此它似乎只是失败了


请注意行2和行3是如何重叠的

一个简单的解决方法是为隐式行定义一个高度。这将覆盖默认的
auto
height，这将导致行在为空时完全折叠


.grid{
显示：网格；
网格模板列：重复（4，1fr）；
网格自动行：50px；/*新*/
}
.项目{
填充：3rem；
边框：1px实心#ccc；
背景#f4；
字体大小：1.3rem；
字体大小：粗体；
文本对齐：居中；
}
.项目：第一个孩子{
格构柱：1/3跨；
网格行：1/2跨；
背景：蓝紫罗兰；
}
.项目：第n个孩子（9）{
格构柱：2/3跨；
网格行：2个/跨度2；
背景：红色；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14
项目15
我想补充一点，
网格自动行：1fr
可能就是OP要查找的确切值。@TemaniAfif，如果容器上有定义的高度，我同意。但是当没有任何空闲空间时，我通常避免使用空闲空间分布。这并不是说您的解决方案在这种情况下不起作用。（另外，我确实看到了您关于的说明。我还没有时间仔细阅读。我希望很快就能找到它。）是的，但我怀疑OP希望具有相同的行高，因此
1fr
将在这里完成工作（不要急于回答其他问题；））如果您添加网格间距，您将清楚地看到以下答案中详细说明的问题