JSFiddle - React, Tailwind, and code Playground
HTML
<div id="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>
CSS
#container {
width: 75%;
border: 1px solid;
float: left;
}
#container .block {
width: 50px;
height: 50px;
background-color: blue;
float: left;
margin: 10px;
}
JavaScript
$(window).resize(function(){
var container = $("#container"),
cWidth = container.width(),
bWidth = 50 + 10 + 10,
nPadding = cWidth - (Math.floor(cWidth / bWidth) * bWidth);
container.css({
"padding-left": nPadding
});
});