Html 用网格定位代码的困难

我需要创建一个仪表板，使用网格布局定位所有元素时遇到了一些麻烦

这就是我的仪表板应该具备的组织：

img  img  nb  nb  members
Projects  nb  nb  
Collab    Activities
Asign     

我用css代码初始化，一个6列4行的网格

当我尝试使用

网格列

et

网格行

设置元素时，这是我的结果：

img nb项目nb合作Asign img nb nb
会员活动

以下是我的HTML代码：

正文
{
显示：网格；
网格模板列：重复（6，1fr）；
网格模板行：重复（4，自动）；
栅隙：20px；
}
.盒子
{
背景：#333；
颜色：#fff；
边框颜色：#8000FF；
填充：20px；
}
.img{
格构柱：跨度2；
网格行：1；
}
.项目{
格构柱：跨度1；
网格行：1；
}
.nb{
格构柱：跨度2；
网格行：1；
}
.成员{
格构柱：跨度2；
网格行：2；
}
.合作{
格构柱：跨度1；
网格行：1；
}
.活动{
格构柱：跨度4；
网格行：2；
}
.asign{
格构柱：跨度1；
网格行：1；
}

照片1
照片2
35
19
记忆
Accédezávos项目
170
1.
邀请之声
活动
分配vos项目

您拥有的不是一个6列网格-它似乎是一个3列网格，每列分成两部分（基于您的HTML）

正文{
显示：网格；
网格模板列：重复（3，1fr）；
网格模板行：重复（4，自动）；
栅隙：20px；
}
.盒子{
背景：#333；
颜色：#fff；
边框颜色：#8000FF；
填充：20px；
}
.img{
网格行：1；
显示器：flex；
}
.项目{
网格行：2；
}
.nb-1{
网格行：1；
显示器：flex；
}
.nb-2{
网格柱：2；
显示器：flex；
}
.成员{
网格行：1；
}
.合作{
网格行：3；
}
.活动{
网格行：3；
//格构柱：跨度2；
}
.asign{
网格行：4；
}

照片1
照片2
35
19
记忆
Accédezávos项目
170
1.
邀请之声
活动
分配vos项目

如果是3或6列，您似乎对位置和跨度感到困惑。如果要同时指定这两个参数，首先需要设置行或列的编号，然后添加斜杠、关键字span，最后是要指定的cgrid单元格数量。{grid column:1/span 2；`如果不需要span，那么

grid column:1；

就足够了。您也可以对行执行此操作，否则，它将被设置在有空间的位置。代码中的示例以及我认为对布局的理解：。网格也可以被叠加