JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div></div>

CSS

.block {
 -moz-box-sizing : border-box;
 box-sizing      : border-box;
 border  : 5px solid DarkRed;
 margin : 0;
 width   : 140px;
 height  : 140px;
 display : inline-block;
}
.container {
 text-align  : left;
 line-height : 0;
 display     : inline-block;
}

JavaScript

// Note: this is a Javascript solution..
window.addEventListener ('resize', resize_it)

resize_it ()

function resize_it () {
 var container = document.getElementsByClassName ('container')[0]
 container.style.width = ""
 var block = document.getElementsByClassName ('block')[0]
 var block_width =
  block.clientWidth +
  parseFloat (window.getComputedStyle(block)['borderLeftWidth']) +
  parseFloat (window.getComputedStyle(block)['borderRightWidth'])
 var row_amount = Math.floor(container.clientWidth / block_width)
 container.style.width = (row_amount * block_width) + 'px'
 container.parentNode.style.textAlign = "center"
}