JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont">
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
</div>

CSS

.cont {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border: 1px solid grey;
    margin: auto;
    width: 60%;
    padding: 10px;
}
.elem {
    height: 100px;
    width: 100px;
    border: 1px solid blue;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-right: 10px;
    margin-bottom: 10px;
}

JavaScript

$(window).resize(function () {
    var elementWidth = 112;
    var Elements = $(".elem");
    var parentWidth = $(".cont").width();
    var rowsCount = Math.ceil((Elements.length * elementWidth) / parentWidth);
    var perRow = Math.ceil(Elements.length / rowsCount);
    perRow = perRow * elementWidth > parentWidth ? perRow - 1 : perRow;
    $.each(Elements, function (index, item) {
        $(this).css("margin-right", "");
    });

    for (i = 1; i <= rowsCount && rowsCount > 1; i++) {
        if (i * perRow <= Elements.length) Elements.eq((i * perRow) - 1).css("margin-right", parentWidth - (perRow * elementWidth));
    }
});