Css 将马赛克布局的宽度更改为50%/50%

我想在这个布局的图像，以每个占50%的页面。 现在，大图像的分割为2/3，小图像的分割为1/3

图片如下：

我可以使用以下方法使大图像占据50%：

.tweak-index-gallery-layout-packed [data-index-gallery-images='3'] 
.Index-gallery-item:nth-child(3n+1) {
width: 50%;}

---

我不知道如何在更改大图像宽度后将小图像扩展到右侧。

我只编写了基本代码，希望能对您有所帮助。谢谢

正文{
保证金：0；
}
.索引廊内{
背景色：#fff；
显示：内联块；
宽度：100%；
}
.索引库项目{
框大小：边框框；
浮动：左；
高度：500px；
边框：5px实心#fff；
宽度：50%；
}
.索引库项目：第n个子项（2），
.索引库项：第n个子项（3）{
高度：250px；
宽度：50%；
}
.索引库项目内部{
背景色：#ccc；
身高：100%；
宽度：100%；
}
.索引库项目图像{
背景色：白色！重要；
填充：0！重要；
}

请将您的HTML放入问题本身。这可以应用于网站上的选择器吗？@Hassan Siddiqui首先，我必须检查HTML结构。你能分享一些有用的例子或链接吗？谢谢链接在这里。我知道它可以从html构建，但试图修改现有的结构，以便以后有人可以轻松更新，但他们想要50/50的布局。我只是根据所需的结构更新上面的代码片段。谢谢这似乎真的很接近！我更新到双方各占50%。我现在唯一看不到的是填充物。正在努力解决这个问题@Hassan Siddiqui