如何在vuejs中动态创建CSS网格

Question

我正在使用vuejs创建一个Web应用程序，并且需要创建一个像这样的图片库样式。

问题在于我的应用程序中的图像将是动态的，因此可以有任意数量的图像，我希望每个图像都可以根据其在CSS网格中的高度和宽度来调整其位置。我现在正在使用静态图像，但首先要处理样式。以下是我的代码及其屏幕截图。

<div class="pallete">
    <div class="pallete-header">glasser</div>
    <div class="pallete-content">
      <img
        v-for="i in images"
        :key="i"
        src="https://cb2.scene7.com/is/image/CB2/RonanSofaGreySHF16_16x9/?$web_zoom_furn_hero$&160623165025&wid=1008&hei=567"
        alt="pallete-img"
        class="pallete-content__img"
      >
      <img
        v-for="i in images"
        :key="i"
        src="https://s7d5.scene7.com/is/image/Anthropologie/40002800_092_b?$a15-pdp-detail-shot$&hei=900&qlt=80&fit=constrain"
        alt="pallete-img"
        class="pallete-content__img"
      >
      <img
        src="https://cb2.scene7.com/is/image/CB2/RonanSofaGreySHF16_16x9/?$web_zoom_furn_hero$&160623165025&wid=1008&hei=567"
        alt="pallete-img"
        class="pallete-content__img"
      >
    </div>
  </div>

SCSS

.pallete {
  background-color: #acaba1;
  flex: 1;
  border-radius: 1rem;
  &:not(:last-child) {
    margin-right: 2rem;
  }
  &-content {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    &__img {
      width: 100%;
      min-height: 100%;
    }
  }
}

左列第三张图片后面的空白是问题所在。