JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
  margin: 0;
}
div#wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  justify-content: space-around;
}
p {
  margin: 0;
  background: #dc4747;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 40px;
  font-family: sans-serif;
  color: #7b0a0a;
  border-radius: 4px;
}

JavaScript

resize = function(){
  var grid = document.getElementById('wrapper');
	var items = Math.floor(grid.scrollWidth/100);
	grid.style.gridRowGap = 
		((grid.scrollWidth - (items*100)) / (items)) + 'px';
};
window.onresize = resize;
resize();