I'm currently working on an image grid that consists of 2 rows laid out horizontally. Initially, the first row contains 4 images while the second row has 2 images. Users should have the ability to add more images to the second row. The issue I am facing is that in the first row, the images display correctly, but in the second row, the two images are shown at the beginning and end, leaving empty space in the middle. I have included some images for reference.
Here is what my current setup looks like: https://i.sstatic.net/OoEeA.jpg
<div class="container-gallery">
<div class="md-col-5 md-lg-5 col-sm-12" style="padding: 0;margin:0">
<div class="image-grid">
<a href="" *ngFor="let Image of Images">
<img class="gallary-images" src="assets/puppy.jpg" alt="">
</a>
</div>
</div>
</div>
This is My SCSS
.container-gallery{
width: percentageCalculator(870);
.image-grid{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.gallary-images{
height: percentageCalculator(130);
width: percentageCalculator(165);
border-radius: percentageCalculator(6);
margin-bottom: percentageCalculator(10);
opacity: 0.7;
}
}
My desired outcome is as follows: