Javascript 网格末尾的不均匀图像

我正在创建一个基于网格内图像的项目

目标是实现这样的网格：-（）无论图像大小，网格都必须是均匀的。我尝试了多种Bootstrap/cssgrid/Table方法，每一种方法都有某种缺陷

问题是，这个项目是为一个建筑师创建的，以展示画廊。因此图像可能大小不同。我创建的是。如您所见，网格不均匀，末端未对齐，并且根据大小，如果填充空网格，网格将生成新行

我真的希望有人能帮我度过难关。提前谢谢

这个片段不起作用我不知道！！添加只是为了给出情况的背景

代码：

for（让index=1；index<23；index++）{
$（'.grid'）.append（'Lorem IpsumFact 1 |事实2 |事实3 |事实4'）；
}
设colc=new Colcade（“.grid”，
{
列：'.grid col'，
项目：'.grid项目'
});
.grid图像{
宽度：100%；
}
.grid画廊{
宽度：100%！重要；
利润率最高：2%！重要；
保证金：0自动；
}
.电网{
显示器：flex；
填充：10px 15px；
}
.grid col{
弹性：1；
填充：0.1米；
}
.grid col--2、.grid col--3{
显示：无；
}
.内容{
位置：绝对位置；
背景：rgba（0,0,0,8）；
颜色：白色；
边缘顶部：1米；
}
.含量h2{
边缘：0.2米0.5米；
字号：1em；
}