<div class="wrapper-masonry">
    <div id="masonry">
      <img src="https://images.unsplash.com/photo-1562231839-706500e7162f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="image" />
      <img src="https://images.unsplash.com/photo-1562235040-0a9989d42f0d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="image" />
      <img src="https://images.unsplash.com/photo-1562102049-03d1bd23c43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" class="image" />
      <img src="https://images.unsplash.com/photo-1562229126-0cb2e7c2b2e0?ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80" class="image" />
      <img src="https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" class="image" />
      <img src="https://images.unsplash.com/photo-1562247279-8e9a4d7ef228?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" class="image" />
      <img src="https://images.unsplash.com/photo-1556741568-055d848f8bfd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" class="image" />
      <img src="https://images.unsplash.com/photo-1562245859-9de3fae76585?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80" class="image" />
      <img src="https://images.unsplash.com/photo-1562219797-64dfc77689a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" class="image" />
      <img src="https://images.unsplash.com/photo-1562234874-dff37ac84a22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="image" />
      <img src="https://images.unsplash.com/photo-1562236195-47b094409730?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="image" />
      <img src="https://images.unsplash.com/photo-1562239711-f353a425d023?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="image" />
      <img src="https://images.unsplash.com/photo-1562244602-0f73795e5b16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="image" />
      <img src="https://images.unsplash.com/photo-1562245859-3406849b0423?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="image" />
      <img src="https://images.unsplash.com/photo-1562217305-02fd1cfe4dd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="image" />
      <img src="https://images.unsplash.com/photo-1562174949-314f9bcf6436?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="image" />
      <img src="https://images.unsplash.com/photo-1562154152-2a929b0dc218?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="image" />
      <img src="https://images.unsplash.com/photo-1562174949-4591859cae0a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="image" />
    </div>
  </div>

.masonry-layout {
  --columns: 1;
  --gap: 2rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-gap: var(--gap);
  padding: 2rem;
}
.masonry-layout > div > img,
.masonry-layout > div > div {
  width: 100%;
  margin-bottom: 2rem;
}
.masonry-layout.columns-1 {
  --columns: 1;
}
.masonry-layout.columns-2 {
  --columns: 2;
}
.masonry-layout.columns-3 {
  --columns: 3;
}
.masonry-layout.columns-4 {
  --columns: 4;
}

/*
Masonry Layout JS Vanilla
https://github.com/Mathiew82/masonry-layout-vanilla
*/
var fecthMasonry = function (container, items, columns) {
    var CONTAINER_EL = document.querySelector("#" + container);
    var WRAPPER_CONTAINER_EL = CONTAINER_EL.parentNode;
    var ITEMS_ELS = document.querySelectorAll("." + items);
    CONTAINER_EL.parentNode.removeChild(CONTAINER_EL);
    var NEW_CONTAINER_EL = document.createElement('div');
    NEW_CONTAINER_EL.setAttribute('id', container);
    NEW_CONTAINER_EL.classList.add('masonry-layout', "columns-" + columns);
    WRAPPER_CONTAINER_EL.appendChild(NEW_CONTAINER_EL);
    for (var i = 1; i <= columns; i++) {
        var COLUMN = document.createElement('div');
        COLUMN.classList.add("masonry-column-" + i);
        NEW_CONTAINER_EL.appendChild(COLUMN);
    }
    var countColumn = 1;
    ITEMS_ELS.forEach(function (item) {
        var col = document.querySelector("#" + container + " > .masonry-column-" + countColumn);
        col.appendChild(item);
        countColumn = countColumn < columns ? countColumn + 1 : 1;
    });
};

fecthMasonry('masonry', 'image', 3);