网格末尾的图像不均匀

Question

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

目标是要达到这样的目标：-（This Image）网格大小必须均匀，无论图像大小如何。我尝试了多种Bootstrap / CSS-grid / Table方法，其中每一个都有某种缺陷。

问题是正在创建此项目供建筑师显示画廊。因此，图像的大小可能不同。我创建的一个是Grid Start Grid End。如您所见，网格不均匀且末端未对齐，并且根据大小，如果填充空白行，网格会换行。

我真的希望有人可以帮助我解决这个问题。预先感谢。

我不知道该代码段不起作用！！添加只是为了给出具体情况。

代码：

for (let index = 1; index < 23; index++){
    $('.grid').append('<div class="grid-container grid-item" data-aos="fade-up"><div class="overlay"><div class="overlay-title">Lorem Ipsum</div><div class="overlay-fact">Fact 1 | Fact 2 | Fact 3 | Fact 4</div><div class="overlay-view"><a href="#">View Product</a></div></div><img class="grid-image" src="dist/images/grid/'+index+'.jpg" alt="picture-'+index+'"></div>');
}

let colc = new Colcade( '.grid', 
{
    columns: '.grid-col',
    items: '.grid-item'
});

.grid-image {
    width: 100%;
}

.grid-gallery {
    width: 100% !important;
    margin-top: 2% !important;
    margin: 0 auto;
}

.grid {
    display: flex;
    padding: 10px 15px;
}

.grid-col {
    flex: 1;
    padding: 0 .1em;
}

.grid-col--2, .grid-col--3 {
    display: none;
}

.content {
    position: absolute;
    background: rgba(0,0,0,.8);
    color: white;
    margin-top: 1em;
}
.content h2 {
    margin: 0.2em 0.5em;
    font-size: 1em;
}

<script src="https://unpkg.com/colcade@0/colcade.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-gallery">
 <div class="grid">
  <div class="grid-col grid-col--1">
  </div>
  <div class="grid-col grid-col--2">
  </div>
  <div class="grid-col grid-col--3">
  </div>    
 </div>
</div>