How to create a mosaic from images of different sizes on Vue.js?

Question

Vue.js

How to create a responsive mosaic from images of different sizes on Vue.js?
Now the site page looks like this .
How to get rid of huge padding under wide images, do not make images the same size?

project.vue

<template>
  <div class="item">
    <img class="image" :src="require('@/assets/img/' + image + '.jpg')" alt="">
    <div class="text">
      <div class="name">
        {{name}}
      </div>
      <div class="author">
        {{author}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["image", "name", "author"],
  data() {
    return {}
  }
}
</script>

<style lang="sass" scoped>
@import '../assets/sass/_vars'

.item
  max-width: 320px
  margin: 10px
  flex: auto
  .image
    width: 100%
    height: auto
</style>

ProjectList.vue

<template>
  <div class="project">
    <h1 class="project-list-header mb-3 mt-3">{{ListName}}</h1>
    <div class="project-list">
      <Project :image="'1'" :name="'Превосходная картина'" :author="'Неизвестный Автор'" />
      <Project :image="'2'" :name="'Превосходная картина'" :author="'Неизвестный Автор'" />
      <Project :image="'3'" :name="'Превосходная картина'" :author="'Неизвестный Автор'" />
      <Project :image="'4'" :name="'Превосходная картина'" :author="'Неизвестный Автор'" />
      <Project :image="'5'" :name="'Превосходная картина'" :author="'Неизвестный Автор'" />
      <Project :image="'2'" :name="'Превосходная картина'" :author="'Неизвестный Автор'" />
      <Project :image="'7'" :name="'Превосходная картина'" :author="'Неизвестный Автор'" />
      <Project :image="'4'" :name="'Превосходная картина'" :author="'Неизвестный Автор'" />
      <Project :image="'6'" :name="'Превосходная картина'" :author="'Неизвестный Автор'" />
    </div>
  </div>
</template>

<script>
import Project from "@/components/Project.vue";

export default {
  components: {
    Project
  },
  props: ["ListName"],
  data() {
    return {};
  }
};
</script>

<style lang="sass" scoped>
@import '../assets/sass/_vars'

.project
  &-list
    display: flex
    flex-flow: row wrap
    justify-content: center
    &-header
      text-align: center
      font-size: 24px
      font-family: 'BebasNeue-Bold-av', sans-serif
      font-weight: 800
</style>

Answer 1

Like this, for example , if you choose a plugin.
Demo.