Css 在不折叠行的情况下扩展栅格区域

我想使

.item8

扩展到

.item2

和

.item3

。有人能帮忙吗

当我将

.item8

改为

1/2/span 2/span 5

时，它只适合第一行

就这样,

.grid容器{
显示：网格；
网格模板列：自动；
栅隙：10px；
背景色：#2196F3；
填充：10px；
}
.grid容器>div{
背景色：rgba（255、255、255、0.8）；
文本对齐：居中；
填充：20px0；
字体大小：30px；
}
.项目8{
网格面积：1/2/span 2/span 4；
}
.项目1{
网格面积：1/1/4/1；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13

您尚未定义行或网格容器的高度。这意味着行将默认为

网格自动行：auto

（基于内容的高度），网格容器将基于和管理网格项

保持简单。定义容器上的高度和/或定义行的高度

.grid容器{
显示：网格；
网格模板列：重复（6，自动）；
网格自动行：100px；/*新*/
栅隙：10px；
背景色：#2196F3；
填充：10px；
}
.grid容器>div{
背景色：rgba（255、255、255、0.8）；
文本对齐：居中；
填充：20px0；
字体大小：30px；
}
.项目8{
网格面积：1/2/span 2/span 5；/*调整*/
}
.项目1{
网格面积：1/1/4/1；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13

您尚未定义行或网格容器的高度。这意味着行将默认为

网格自动行：auto

（基于内容的高度），网格容器将基于和管理网格项

保持简单。定义容器上的高度和/或定义行的高度

.grid容器{
显示：网格；
网格模板列：重复（6，自动）；
网格自动行：100px；/*新*/
栅隙：10px；
背景色：#2196F3；
填充：10px；
}
.grid容器>div{
背景色：rgba（255、255、255、0.8）；
文本对齐：居中；
填充：20px0；
字体大小：30px；
}
.项目8{
网格面积：1/2/span 2/span 5；/*调整*/
}
.项目1{
网格面积：1/1/4/1；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13