JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrapper'></div>

CSS

body { margin: 0;}
#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-auto-flow: row;
  grid-auto-rows: 1px;
  grid-column-gap: 5px;
  /*grid-row-gap: 5px;*/
}
#wrapper > img {
  width: 100%;
  margin-bottom: 5px;
}
@media screen and (max-width: 535px){
  #wrapper {  grid-template-columns: repeat(4, 100px);}
}
@media screen and (max-width: 430px){
  #wrapper {  grid-template-columns: repeat(3, 100px);}
}
@media screen and (max-width: 325px){
  #wrapper {  grid-template-columns: repeat(2, 100px);}
}
@media screen and (max-width: 220px){
  #wrapper {  grid-template-columns: repeat(1, 100px);}
}

JavaScript

/*
on FireFox51
 - go to about:config
 - search grid
 - enable both of them
*/

addfewitems = function(e){
	for(var i=0;i<100;i++){
		var elem = document.createElement('IMG');
  	var rand = Math.floor(Math.random()*100)+50;
  	elem.src = 'https://via.placeholder.com/100x'+rand+'?text='+i;
    elem.addEventListener('load',oneMasonry);
  	document.getElementById('wrapper').appendChild(elem);
	};
};

oneMasonry = function(e){
	e.target.style.gridRowEnd='span '+(e.target.naturalHeight);
};

addfewitems();