CodePen Embed - Masonry Layout

<div class="gallery" id="gallery">
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1520110594912-8c0c80561889?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=52561e7e725247a89ef35a8a4dd2e7c0&auto=format&fit=crop&w=634&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1519838804353-8f76f7a85588?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=64580d693f91c82feec03cac83e8af08&auto=format&fit=crop&w=1350&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1517382738648-6544f2e0d47a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f10eedc57cd3d79310c5b3a92c93a018&auto=format&fit=crop&w=1350&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d702cb99ca804bffcfa8820c46483264&auto=format&fit=crop&w=651&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1507019403270-cca502add9f8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=456245a5bd2285aab008f61a9c3ba5ed&auto=format&fit=crop&w=634&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1521844951825-11a44040b513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29ba5a5b8eff22fe5db121568360ff02&auto=format&fit=crop&w=679&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1514976575739-7902e7066844?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0eecfd4e3243e324ff3a4aa2b21dcbd1&auto=format&fit=crop&w=680&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1492739256640-0b5ec57113f0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ce408ae9491c117102c16bc5465e380&auto=format&fit=crop&w=634&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1486486704382-8ee6f7754a45?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8a5ec5734384e9f089fed88430f27879&auto=format&fit=crop&w=1355&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1504853593898-da2df34488ec?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=86851061f4e74069d2a717fce9ddef55&auto=format&fit=crop&w=675&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1508978644997-53cc5bfb8a03?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4502b9fcc0c0a4b46abdb62568f8cf5&auto=format&fit=crop&w=634&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1495647073092-135157cc8085?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=59e14200bdcd1324ee16366a37b315c0&auto=format&fit=crop&w=634&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1464863979621-258859e62245?ixlib=rb-0.3.5&s=fd348f4602485866a3996a1fe67b462b&auto=format&fit=crop&w=633&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1460904577954-8fadb262612c?ixlib=rb-0.3.5&s=5bcb5490cd0e0bc4e23907eea361e98b&auto=format&fit=crop&w=1840&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1523896719094-5987f9cd958e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=46cc61154163f9aab58a19c674ec7377&auto=format&fit=crop&w=684&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1520110594912-8c0c80561889?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=52561e7e725247a89ef35a8a4dd2e7c0&auto=format&fit=crop&w=634&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1519838804353-8f76f7a85588?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=64580d693f91c82feec03cac83e8af08&auto=format&fit=crop&w=1350&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1517382738648-6544f2e0d47a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f10eedc57cd3d79310c5b3a92c93a018&auto=format&fit=crop&w=1350&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d702cb99ca804bffcfa8820c46483264&auto=format&fit=crop&w=651&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1507019403270-cca502add9f8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=456245a5bd2285aab008f61a9c3ba5ed&auto=format&fit=crop&w=634&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1521844951825-11a44040b513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29ba5a5b8eff22fe5db121568360ff02&auto=format&fit=crop&w=679&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1514976575739-7902e7066844?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0eecfd4e3243e324ff3a4aa2b21dcbd1&auto=format&fit=crop&w=680&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1492739256640-0b5ec57113f0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ce408ae9491c117102c16bc5465e380&auto=format&fit=crop&w=634&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1486486704382-8ee6f7754a45?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8a5ec5734384e9f089fed88430f27879&auto=format&fit=crop&w=1355&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1504853593898-da2df34488ec?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=86851061f4e74069d2a717fce9ddef55&auto=format&fit=crop&w=675&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1508978644997-53cc5bfb8a03?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4502b9fcc0c0a4b46abdb62568f8cf5&auto=format&fit=crop&w=634&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1495647073092-135157cc8085?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=59e14200bdcd1324ee16366a37b315c0&auto=format&fit=crop&w=634&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1464863979621-258859e62245?ixlib=rb-0.3.5&s=fd348f4602485866a3996a1fe67b462b&auto=format&fit=crop&w=633&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1460904577954-8fadb262612c?ixlib=rb-0.3.5&s=5bcb5490cd0e0bc4e23907eea361e98b&auto=format&fit=crop&w=1840&q=80" alt=""></div>
  <div class="gallery-item"><img src="https://images.unsplash.com/photo-1523896719094-5987f9cd958e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=46cc61154163f9aab58a19c674ec7377&auto=format&fit=crop&w=684&q=80" alt=""></div>
</div>

img {
  max-width: 100%;
  display: block;
  /*height: 100%;
  object-fit: cover; Esto no funciona correctamente*/
}

.masonry-layout {
  --columns: 1;
  --gap: 1.2rem;
  $columns: 6;
  
  display: grid;
  grid-template-columns: repeat(var(--columns),1fr);
  grid-gap: var(--gap);
  
  .masonry-item{
    margin-bottom: var(--gap);
  }
  
  @for $i from 1 through $columns {
    &.columns-#{$i}{
      --columns: #{$i};
    }
  }
}

View Compiled

const masonryLayout = (containerElem, itemsElems, columns) => {
  containerElem.classList.add('masonry-layout', `columns-${columns}`)
  let columnsElements = []
  
  for( let i = 1; i <= columns; i++){
    let column = document.createElement('div')
    column.classList.add('masonry-column', `column-${i}`)
    containerElem.appendChild(column)
    columnsElements.push(column)
  }
  
  for(let m = 0; m < Math.ceil(itemsElems.length / columns); m++){
    for(let n = 0; n < columns; n++){
      let item = itemsElems[ m * columns + n]
      columnsElements[n].appendChild(item)
      item.classList.add('masonry-item')
    }
  }
}

masonryLayout(document.getElementById('gallery'),
              document.querySelectorAll('.gallery-item'), 4)

View Compiled

This Pen is owned by David Rivadeneyra on CodePen.

See more by @getbacker on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.