Html 获取网格行以替代网格模板行

我这样问是为了我自己的教育，如果这是一种不好的做法，请随便说

我希望元素

#一#二#三

和

#四

的父属性

网格模板行：100px 100px 100px 100px

通过为每个元素设置单独的网格行设置来覆盖

元素

#one

和

#two

的响应与我设置它们时的预期一样：

#one{
     grid-row: 1/ span 4 ; 
}

#two{
     grid-row: 1/ span 4 ; 
}

但是，当我尝试将类似设置应用于

#three

和

#three

时，我没有得到预期的结果。我希望三个和四个的高度与一个和两个完全相同。相反，它们飞到页面的一侧

我希望这会显示类似于#1和#2的元素。它不起作用：

#three{
     grid-row: 2/ span 4 ; 
}


#four{
     grid-row: 2/ span 4 ; 
}

我想知道如何修复此问题以及正确的单个值，以设置

#three

和

#three

以覆盖所述网格模板行

代码：

*{
字体系列：Helvetica；
字号：1em；
颜色：白色；
文本对齐：居中；
}
img{
显示：块；
利润率：20px 20px；
左边距：自动；
右边距：自动；
边界半径：50%；
边框宽度：5px；
边框样式：实心；
边框颜色：rgb（141、110、99）；
最大宽度：50%；
高度：自动；
}
/*_____________________________网格*/
.集装箱{
显示：网格；
网格模板列：1fr 2fr；
网格模板行：100px 100px 100px 100px 100px 100px 100px；
栅隙：10px；
}
.容器分区：第n个子项（偶数）{
背景颜色：橙色；
}
.容器分区：第n个子项（奇数）{
背景颜色：紫色；
}
#一个{
网格行：1/4跨；
}
#两个{
网格行：1/4跨；
}
/*
我希望这会显示类似于#1和#2的元素。它不起作用
#三{
网格行：2/4跨；
}
#四{
网格行：2/4跨；
}
*/

1.
2.
文本
3.
文本
4.
文本
5.
文本
6.
文本

您需要覆盖，当网格区域没有明确定义时，它会计算渲染网格区域的“正确”位置

您正在定义行。也只需定义列

.container{
显示：网格；
网格模板列：1fr 2fr；
网格模板行：100px 100px 100px 100px 100px 100px 100px；
栅隙：10px；
}
#一个{
网格行：1/4跨；
网格列：1；/*新*/
}
#两个{
网格行：1/4跨；
网格列：2；/*新*/
}
#三{
网格行：2/4跨；
网格列：1；/*新*/
}
#四{
网格行：2/4跨；
网格列：2；/*新*/
}
* {
字体系列：Helvetica；
字号：1em；
颜色：白色；
文本对齐：居中；
}
img{
显示：块；
利润率：20px 20px；
左边距：自动；
右边距：自动；
边界半径：50%；
边框宽度：5px；
边框样式：实心；
边框颜色：rgb（141、110、99）；
最大宽度：50%；
高度：自动；
}
.容器分区：第n个子项（偶数）{
背景颜色：橙色；
}
.容器分区：第n个子项（奇数）{
背景颜色：紫色；
}

1.
2.
文本
3.
文本
4.
文本
5.
文本
6.
文本