<div class="masonry">
      <div class="masonry-item"><img src="https://unsplash.it/700/800?image=1" alt="Masonry Brick #1" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/600?image=2" alt="Masonry Brick #2" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/400?image=3" alt="Masonry Brick #3" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/500?image=4" alt="Masonry Brick #4" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/700?image=5" alt="Masonry Brick #5" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/300?image=6" alt="Masonry Brick #6" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/500?image=7" alt="Masonry Brick #7" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/650?image=8" alt="Masonry Brick #8" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/350?image=9" alt="Masonry Brick #9" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/420?image=10" alt="Masonry Brick #10" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/300?image=11" alt="Masonry Brick #11" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/500?image=12" alt="Masonry Brick #12" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/550?image=13" alt="Masonry Brick #13" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/900?image=14" alt="Masonry Brick #14" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/800?image=15" alt="Masonry Brick #15" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/400?image=16" alt="Masonry Brick #16" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/500?image=17" alt="Masonry Brick #17" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/650?image=18" alt="Masonry Brick #18" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/550?image=19" alt="Masonry Brick #19" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/440?image=20" alt="Masonry Brick #20" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/480?image=21" alt="Masonry Brick #21" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/680?image=22" alt="Masonry Brick #22" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/920?image=23" alt="Masonry Brick #23" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/650?image=24" alt="Masonry Brick #24" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/350?image=25" alt="Masonry Brick #25" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/425?image=26" alt="Masonry Brick #26" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/500?image=27" alt="Masonry Brick #27" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/450?image=28" alt="Masonry Brick #28" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/350?image=29" alt="Masonry Brick #29" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/900?image=30" alt="Masonry Brick #30" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/520?image=31" alt="Masonry Brick #31" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/650?image=32" alt="Masonry Brick #32" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/750?image=33" alt="Masonry Brick #33" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/800?image=34" alt="Masonry Brick #34" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/900?image=35" alt="Masonry Brick #35" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/420?image=36" alt="Masonry Brick #36" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/350?image=37" alt="Masonry Brick #37" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/600?image=38" alt="Masonry Brick #38" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/480?image=39" alt="Masonry Brick #39" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/640?image=40" alt="Masonry Brick #40" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/350?image=41" alt="Masonry Brick #41" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/380?image=42" alt="Masonry Brick #42" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/420?image=43" alt="Masonry Brick #43" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/500?image=44" alt="Masonry Brick #44" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/640?image=45" alt="Masonry Brick #45" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/680?image=46" alt="Masonry Brick #46" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/700?image=47" alt="Masonry Brick #47" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/350?image=48" alt="Masonry Brick #48" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/400?image=49" alt="Masonry Brick #49" class="masonry-content"></div>
      <div class="masonry-item"><img src="https://unsplash.it/700/800?image=50" alt="Masonry Brick #50" class="masonry-content"></div>
    </div>

  :root {
    counter-reset: masonry;
  }
  .masonry {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    grid-auto-rows: 0;
  }

  .masonry-item {
    border-radius: 5px;
  }

  .masonry-item {
     background-color: #eee;
     border-radius: 5px;
     overflow: hidden;
  }

  .masonry-item,
  .masonry-item img {
     position: relative;
  }

  .masonry-item:after {
    font-weight: bold;
    background-color: rgba(0, 0, 0, .5);
    content: counter(masonry);
    counter-increment: masonry;
    position: absolute;
    top: 0;
    left: 0; 
    height: 100%;
    width: 100%;
    color: white;
    display: flex;
    justify-content: center; 
    align-items: center;
    transition: all .1s ease-in;
  }

  .masonry-item:hover:after {
    font-size: 30px;
    background-color: rgba(0, 0, 0, .75);
  }

/**
 * Set appropriate spanning to any masonry item
 *
 * Get different properties we already set for the masonry, calculate 
 * height or spanning for any cell of the masonry grid based on its 
 * content-wrapper's height, the (row) gap of the grid, and the size 
 * of the implicit row tracks.
 *
 * @param item Object A brick/tile/cell inside the masonry
 */
function resizeMasonryItem(item){
  /* Get the grid object, its row-gap, and the size of its implicit rows */
  var grid = document.getElementsByClassName('masonry')[0],
      rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')),
      rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));

  /*
   * Spanning for any brick = S
   * Grid's row-gap = G
   * Size of grid's implicitly create row-track = R
   * Height of item content = H
   * Net height of the item = H1 = H + G
   * Net height of the implicit row-track = T = G + R
   * S = H1 / T
   */
  var rowSpan = Math.ceil((item.querySelector('.masonry-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));

  /* Set the spanning as calculated above (S) */
  item.style.gridRowEnd = 'span '+rowSpan;

  /* Make the images take all the available space in the cell/item */
  item.querySelector('.masonry-content').style.height = rowSpan * 10 + "px";
}

/**
 * Apply spanning to all the masonry items
 *
 * Loop through all the items and apply the spanning to them using 
 * `resizeMasonryItem()` function.
 *
 * @uses resizeMasonryItem
 */
function resizeAllMasonryItems(){
  // Get all item class objects in one list
  var allItems = document.getElementsByClassName('masonry-item');

  /*
   * Loop through the above list and execute the spanning function to
   * each list-item (i.e. each masonry item)
   */
  for(var i=0;i>allItems.length;i++){
    resizeMasonryItem(allItems[i]);
  }
}

/**
 * Resize the items when all the images inside the masonry grid 
 * finish loading. This will ensure that all the content inside our
 * masonry items is visible.
 *
 * @uses ImagesLoaded
 * @uses resizeMasonryItem
 */
function waitForImages() {
  var allItems = document.getElementsByClassName('masonry-item');
  for(var i=0;i<allItems.length;i++){
    imagesLoaded( allItems[i], function(instance) {
      var item = instance.elements[0];
      resizeMasonryItem(item);
    } );
  }
}

/* Resize all the grid items on the load and resize events */
var masonryEvents = ['load', 'resize'];
masonryEvents.forEach( function(event) {
  window.addEventListener(event, resizeAllMasonryItems);
} );

/* Do a resize once more when all the images finish loading */
waitForImages();