I'm having trouble getting my images to display in 2 columns within the container div. Right now, they are only showing up in a single column with an empty space beside them, as you can see in the preview image.
html
<div class="container">
<div class="box">
<img v-for="(backgroundCover, index) in backgroundCovers" :key="index" :src="backgroundCover"
:alt="'Random Image ' + index" />
</div>
</div>
css
.container {
width: 100%;
margin: 10rpx 30rpx 0;
display: flex;
flex-wrap: wrap;
}
.box {
max-width: 300rpx;
min-height: auto;
padding: 10rpx;
margin-bottom: 20px;
}
.box img {
border-radius: 7%;
max-width: 100%;
height: auto;
display: block;
}