CSS网格-情绪板设计

我正在尝试使用CSS网格创建类似于此情绪板的布局：

我想每个部分都是一个图片和链接

虽然我不是最大的网格专家，但我似乎无法让它工作。在网上搜索时，我似乎找不到任何东西

这是可能的还是白日梦？任何指示都将不胜感激

带有背景图像：

.container{
宽度：410像素；
高度：610px；
背景：#fff；
盒影：0.5px 0 rgba（0,0,0,5）；
显示：网格；
网格模板柱：1fr 1fr；
栅隙：10px；
填充：10px；
位置：相对位置；
}
.div1、.div2、.div3、.div4{
背景：#e0；
高度：300px；
宽度：200px；
背景尺寸：封面；
背景重复：无重复；
}
.1分部{
背景：url（'https://picsum.photos/200/300');
}
.第2分部{
背景：url（'https://picsum.photos/200/500');
}
.第3分部{
背景：url（'https://picsum.photos/200/700');
}
.第4分部{
背景：url（'https://picsum.photos/400/800');
}
.圆圈{
高度：220px；
宽度：220px；
边界半径：50%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：径向梯度（#E00px，#E0100px，#FFF100px，#FFF110px）；
}
.circle_bg{
位置：绝对位置；
背景：url（'https://picsum.photos/200/200');
宽度：200px；
高度：200px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
边界半径：50%；
}

您可以创建一个2x2 CSS网格，为4个分区设置厚白色边框，然后在网格外放置一个第5个分区，该分区的中心具有较高的z索引，具有透明的50%边框半径边框、白色背景和厚填充，然后将图像居中。因此，基本上您只需覆盖简单2x2网格的中心。

您好，欢迎来到Stack Overflow！要改善你的体验，请阅读一个问题。您还应该查看和。为了进一步了解堆栈溢出的工作原理，.Hi Erin，欢迎使用堆栈溢出！这绝对可以通过CSS实现。我很乐意帮忙，你能把你迄今为止尝试过的东西贴出来吗？