CSS columns not displaying correctly

Question

I've been trying to build a CSS only image gallery for my website. However, the columns are not displayed correctly and I couldn't find a reason for it.

This is what I see.

Both Chrome and FF generated the same view for me. When I change the resolution a bit it turns into this.

But it has a very small range, so when I shrink the page a few more pixels, the boxes go back to their initial positions (first image).

This is the CSS I'm using:

.media-container {
  column-count: 6;
  column-gap: 3%;
}

.media-container .item {
  margin-bottom: 20px;
  background-color: grey;
  display: inline-block;
}

.media-container .item img {
  width: 100%;
  opacity: 0;
}

<div class="media-container">
  <div class="item"><img src="image1.jpg" /></div>
  <div class="item"><img src="image2.jpg" /></div>
  <div class="item"><img src="image3.jpg" /></div>
  <div class="item"><img src="image4.jpg" /></div>
  . . .
</div>

What is the reason for this and how can I fix it?

Answer 1

I would recommend using CSS grid in this case if possible:

.media-container { 
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3%;
}