gallery on grid css

I'll just leave it here as an example.

Source:

/**
 * 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();

: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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<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>