JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="box" style="background:#f00"></div>
    <div class="box" style="background:#0f0"></div>
    <div class="box" style="background:#00f"></div>
    <div class="box" style="background:#ff0"></div>
    <div class="box" style="background:#0ff"></div>
    <div class="box" style="background:#f0f"></div>

    <div class="box" style="background:#500"></div>
    <div class="box" style="background:#050"></div>
    <div class="box" style="background:#005"></div>
    <div class="box" style="background:#550"></div>
    <div class="box" style="background:#055"></div>
    <div class="box" style="background:#505"></div>
  </body>
</html>

CSS

html, body {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.box {
    float:left;
    display: block;
    height: 200px;
    width: 200px;
}

JavaScript

function recalc()
{
    var parent = $('body').width();
    var box = $('.box').width();

    var columns = Math.floor(parent /box);

    var space = (parent - (box * columns)) / columns;

    $('.box').css('margin-left', space/2);
    $('.box').css('margin-right', space/2);
}

recalc();


$(window).resize(function(){
    recalc();
});