Search code examples
htmlcssgoogle-chromecss-multicolumn-layout

Force images distribution across CSS columns in Chrome

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.

Solution

  • 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>