Как сформировать мозаику из изображений разного размера на Vue.js?

Question

[dark_king_13]

Как сформировать адаптивную мозаику из изображений разного размера на Vue.js?
Сейчас страница сайта выглядит так.
Как избавиться от огромных отступов под широкими изображениями, не делаю картинки одинаковыми по размеру?

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

[VegasChickiChicki]

Вот например так, если плагин какой то выбирать.

Демо.