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

Question

dark_king_13 @dark_king_13

Vue.js

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

Как сформировать адаптивную мозаику из изображений разного размера на 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>