CSS：如何使用网格模板区域将网格嵌套到网格中？

我努力做到这一点：

使用CSS网格模板

我可以很容易地实现没有“CAM”元素的模板：

---

但我不知道如何在聊天中“插入”CAM：看起来我需要将网格嵌套到网格中。在给定的图表中，所有CAM、chat和footer只占3列，用户占第4列

因此，网格模板区域为：

grid-template-areas:
    "header header header header"
    "cams cams cams users"
    "chat chat chat users"
    "footer footer footer users";

以下是片段：

#聊天室{
显示：网格；
宽度：100%；
高度：100vh；
网格模板区域：
“标题”
“cams cams用户”
“聊天用户”
“页脚用户”；
网格模板列：1fr 1fr 350px；
网格模板行：50px 50px 1fr 50px；
网格间距：0；
}
.item1{网格区域：头；}
.item2{网格区域：cams；}
.item3{网格区域：用户；}
.item4{网格区域：聊天；}
.item5{网格区域：页脚；}
#聊天室{
文本对齐：居中；
填充：20px0；
字体大小：30px；
}
#货柜组{
边框：实心；
}

标题
凸轮
使用者
聊天
页脚

grid-template-areas:
    "header header header header"
    "cams cams cams users"
    "chat chat chat users"
    "footer footer footer users";