Force images distribution across CSS columns in Chrome

Question

I have the following snippet which creates a nice image "grid" using CSS columns.

.gallery {
  columns: 4;
  column-gap: 5px;
}

.gallery-item {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.gallery-item > img {
  width: 100%;
}

<div class="gallery">
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x400">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x100">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/850x400">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/450x300">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x450">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/400x250">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/600x400">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/500x800">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x200">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/550">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/450x250">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/650x300">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
</div>

However, when there are less elements, images aren't distributed across all columns, at least using Chrome Version 81.0.4044.138 on mac os.

.gallery {
  columns: 4;
  column-gap: 5px;
}

.gallery-item {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.gallery-item > img {
  width: 100%;
}

<div class="gallery">
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x400">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x100">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/850x400">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/450x300">
  </div>
</div>

The same happens with even less elements, and of equal height.

.gallery {
  columns: 4;
  column-gap: 5px;
}

.gallery-item {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.gallery-item > img {
  width: 100%;
}

<div class="gallery">
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
</div>

Is there a way that I can force fewer elements to be distributed across all 4 columns? Or 3 columns if I have 3 elements, etc.

On Safari and Firefox, it behaves the way I want.

This is how it looks in Chrome: https://i.stack.imgur.com/FSyMt.jpg
And this is in Safari: https://i.stack.imgur.com/BN7H4.jpg

Take a look at [column-count](https://caniuse.com/#search=column-count) there are a lot of errors for `column-count` for different browsers. What you want to get is called `masonry gallery` and unfortunately js is used to get the same look for all browsers. — Grzegorz T., Jun 10 '20 at 19:45
No it's not a masonry. It's just images shown in 4 columns, one below another. And what error particularly in the documentation you linked to? I mentioned the issue is with Chrome. — MrUpsidown, Jun 10 '20 at 21:37
I meant the tab [Known issues](https://caniuse.com/#feat=multicolumn) with a lot of problems in different browsers so you have to be careful. — Grzegorz T., Jun 11 '20 at 06:55
Yes, I read that but couldn't find anything related to the issue I was facing. Anyway I believe the problem was the `inline-block` (some remains of a previous version of my grid) which I didn't spot as being the problem. Thanks for your help. — MrUpsidown, Jun 11 '20 at 08:30

score 1 · Accepted Answer · answered Jun 10 '20 at 22:09

The problem here is .gallery-item { display: inline-block; ... set display: block;

img {
  width: 100%;
  vertical-align: middle;
}

.gallery-wrapper {
  padding: 1.5em;
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

.gallery {
  column-count: 1;
  column-gap: 10px;
}

.gallery-item {
  display: block;
  margin-bottom: 10px;
}

.gallery-item,
.gallery-content {
  border-radius: 4px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .gallery {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .gallery {
    column-count: 3;
  }
}

<div class="gallery-wrapper">
  <div class="gallery">
    <div class="gallery-item">
      <img src="https://via.placeholder.com/350">
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/350x400">
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/350x100">
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/850x400">
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/450x300">
    </div>
  </div>
</div>

Force images distribution across CSS columns in Chrome

1 Answers1