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.

This

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

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?

Fair enough, @Eddy88. That was my best guess from just looking at the CSS. But it's clearly not that. Keep persevering! — Rounin
– Rounin, Commented Apr 11, 2021 at 17:41

Dawid Turek · Accepted Answer · 2021-04-11 17:25:24Z

2

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

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

answered Apr 11, 2021 at 17:25

Dawid Turek

462 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eddy88 Over a year ago

Hey, it works better but for some reason the last item is clipped. Is it an expected issue when using grid or is my outer css in interfering? Edit: Okay, figured it out by using grid-template-rows. Thanks!

Collectives™ on Stack Overflow

CSS columns not displaying correctly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related