Html 用不同尺寸的物品包装flexbox

我是否可以使用具有以下文档结构的flexbox实现此布局

我想把大的

放在左边，两个较小的图像放在右边并包装起来

这就是我所做的，使用

display:flex

打开

gallery container

和

flex wrap

.container{
身高：100%；
}
.容器.画廊容器{
背景色：#f6f6f6；
显示器：flex；
柔性包装：包装；
宽度：300px；
调整项目：灵活启动；
}
.容器.图库容器.图库大图像{
显示：块；
宽度：200px；
高度：200px；
背景：薰衣草；
}
.容器.画廊容器.画廊小图片{
显示：块；
宽度：100px；
高度：100px；
背景颜色：紫色；
}

大的
小的
小的
小的
小的
小的

改用它怎么样

.container{
身高：100%；
}
.画廊容器{
背景色：#f6f6f6；
宽度：300px；
高度：100px；
显示：网格；
网格模板行：重复（3，1fr）；
网格模板列：重复（3，1fr）；
}
.画廊图片{
背景：紫色；
宽度：100px；
高度：100px；
}
.画廊img大{
背景：薰衣草；
宽度：200px；
高度：200px；
网格列开始：0；
格构柱端部：跨度2；
网格行开始：0；
网格行端：跨度2；
}

大的
小的
小的
小的
小的
小的

flexbox的布局笨重且效率低下，原因如下：

但是，使用CSS网格布局相对简单

没有对HTML的更改

.gallery容器{
显示：网格；
网格模板列：重复（自动填充，100px）；
网格自动行：100px；
宽度：300px；
背景色：#f6f6f6；
}
.画廊大形象{
格构柱：跨度2；
网格行：跨度2；
背景：薰衣草；
}
.画廊小图片{
背景颜色：紫色；
颜色：白色；
}

大的
小1
小二
小三
小四
小五
小6（继续包装）
小号7（续包装）

ie中不会有问题吗？可能会。但IE支持某些网格功能。请参阅：