Auto column widths with images inside - html

Question

I am currently trying to achieve the following type of grid/column but I am not able to.
Some images have bigger width than others so they need to take up more space.
I will have around 30ish images that I will loop through so i can't just put a set width to each column.
I am not sure how to tackle this problem.
I have the following and I want to have 3 per row it is giving me somewhat okey results but not exactly.
https://codepen.io/BlooDyBG/pen/OJVxYEj
<div class="flex-container">
<div class="flex-item">
<a href="https://ibb.co/CBBLGnp"><img src="https://i.ibb.co/WnnCJcN/Image-2.png" alt="Image-2"
border="0"></a>
</div>
<div class="flex-item">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/HqdrqQB/Image-3.png" alt="Image-3" border="0">
</a>
</div>
<div class="flex-item">
<img src="https://i.ibb.co/r0YZVVw/Image-4.png" alt="Image-4" border="0">
</div>
<div class="flex-item">
<img src="https://i.ibb.co/7pSqfZn/Image-5.png" alt="Image-5" border="0">
</div>
<div class="flex-item">
<img src="https://i.ibb.co/R6Vd1WH/Image-6.png" alt="Image-6" border="0">
</div>
<div class="flex-item">
<img src="https://i.ibb.co/HqdrqQB/Image-3.png" alt="Image-3" border="0">
</div>
</div>
CSS
.flex-container {
display : flex;
flex-wrap: wrap;
padding : 20px;
}
.flex-item {
flex: 1 1 auto;
padding : 20px;
}
img {
width : 100%;
height : 100%;
}

Answer 1

The third part of the flex shorthand is flex-basis, which informs the browser how to treat sizing of the flexible items. In this case, you've set it to auto which instructs the browser to use the width of the content to determine the size.
Instead, you should use something like flex: 1 1 30% to ensure that all of the items have a consistent size.
Alternately, you can create this type of layout with CSS Grid. That would look something like this:
.flex-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}