vue循环创建9张图片。每排3个相邻的2图片之间有3px的空白

<template>
  <div class="image-container">
    <div v-for="(image, index) in images" :key="index" class="image-wrapper">
      <img :src="image" alt="Image">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg',
        'image4.jpg',
        'image5.jpg',
        'image6.jpg',
        'image7.jpg',
        'image8.jpg',
        'image9.jpg'
      ]
    }
  }
}
</script>
<style>
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-wrapper {
  margin: 10px;
}

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border: 3px solid #000;
}
</style