Html 组合两个CSS网格的布局

我正在做一项作业，我想让两组css网格相互混合，如下所示：

我正在使用以下代码

.group1.item1{
网格柱：1/4；
}
.group1.item2{
网格柱：1；
}
.GROUP 1.项目3{
网格柱：2/4；
}
.2.项目4{
网格柱：2/3；
}
.2.项目5{
网格柱：3/4；
}
.2.项目6{
网格柱：2/4；
}
.集装箱{
显示：网格；
网格间距：5px；
最大宽度：1200px；
保证金：0自动100px自动；
边框：8px虚线#999；
}

项目1
项目2
项目3
项目4
项目5
项目6

您可以使用display:contents来避免子容器阻挡，并使用display grid和grid area（网格行/网格列）来分派元素

但这还不是每个地方都能做到的

这个想法的演示

.part5{
显示：网格；
网格模板柱：重复（6，1fr）；
最低高度：100vh
}
.container.group1，
.container.group2{
显示：内容；
}
.项目1{
格构柱：1/6跨；
网格行：1；
边框：实心；
颜色：番茄；
}
.项目2{
网格行：2/3跨；
格构柱：1/2跨；
边框：实心；
颜色：青绿色；
}
.项目3{
网格行：2；
格构柱：3/4跨；
边框：实心；
颜色：绿色；
}
.项目4{
网格行：3；
格构柱：3/2跨；
边框：实心；
}
.项目5{
网格行：3；
格构柱：5/2跨；
边框：实心；
颜色：棕色；
}
.项目6{
网格行：4；
格构柱：3/4跨；
边框：实心；
颜色：紫色；
}
/*演示*/
* {
保证金：0；
}
[类别^=项目]{
显示器：flex；
对齐项目：居中；
证明内容：中心；
字体大小：calc（2vh+2vw）
}

项目1
项目2
项目3
项目4
项目5
项目6

显示：子网格

解决这个问题的一个干净而有效的方法是使用

display:subgrid

，这是一种专为此类布局设计的CSS网格功能。子网格允许嵌套网格容器识别主网格容器的网格线

不幸的是，此功能还不可用。详情如下：

---

网格模板区域

解决此问题的另一种干净有效的方法是将主容器（

.part5.container

）设置为网格容器，然后使用

网格模板区域将两个子容器排列成所需的形状

不幸的是，此功能还不可用。详情如下：





可能的解决办法
因此，这里有一个解决方案，使用CSS网格和（为了补偿上面列出的缺失功能）一点绝对定位。对HTML没有任何更改


.part5.container{
显示：网格；
边框：8px虚线#999；
高度：100vh；
网格模板行：自动；
网格模板列：35%1fr；
网格模板区域：“group1 group1”
“.2组”；
}
.container.group1{
网格区域：第1组；
显示：网格；
网格模板行：50px 1fr；
网格模板列：35%1fr；
网格间距：5px；
位置：相对位置；
}
.项目1{
网格柱：1/-1；
}
.项目2{
位置：绝对位置；
顶部：55px；/*顶行高度加间隙*/
宽度：35%；/*第一列宽度*/
高度：计算（100vh-71px）；/*减去顶行高度（50px）加边框高度（16px））*/
}
.项目3{
网格柱：2；
}
.container.group2{
网格区域：第2组；
显示：网格；
网格模板行：1fr 50px；
网格模板柱：1fr 1fr；
网格间距：5px；
保证金：5px0.5px；
}
.项目6{
网格柱：1/-1；
}
.项目{
背景颜色：浅绿色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
身体{
保证金：0；
}
* {
框大小：边框框；
}

项目1
项目2
项目3
项目4
项目5
项目6
您刚才说的作业，这是作业吗？我希望你的指派人希望你使用嵌套grids@ImmortalDude是的，确切地说，我的分配问题是使用嵌套网格创建第5部分布局。你能帮我吗？我必须使用css网格系统来完成这项工作。有没有其他方法可以使用css网格获得像图像这样的输出？？@JamieSouthwell？？它正在主容器上使用网格系统，请按照链接了解子容器的显示：内容在此处的用法。@JamieSouthwell教程关于显示：即使子容器不是网格框的直接子容器，也允许使用网格系统的内容：（请毫不犹豫地询问您的困惑）还有一支笔：@JamieSouthwell有什么反馈吗？您是否可以在网格中使用display:contents，还有一个答案是不使用它，但不是那么直观。先生，我已经按照您的笔操作并获得了所需的输出，但我对这行代码
.container.group1、.container.group2{display:contents；}感到困惑
我的分配问题是使用嵌套网格创建零件5布局