JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="clickme">Fire window.resize</a>

JavaScript

function SetSize(){
    var container_width = $('.portfolioIn').width();
    container_width = container_width - (container_width%1);
    function _init(){
        var item_width = $('.portfolioItem');
        $(window).resize(function(){
            
            if($(window).width() <= 400){
                alert('<=400');
                var margin_for_each = container_width - item_width.width();
            }
            else if($(window).width() <= 540 && $(window).width() >= 400){
                alert('>=400 && <=540');
                var margin_area = container_width-item_width.width()*2;
                margin_for_each = margin_area/2;
            }
            else if($(window).width() <= 600){
                alert('<=600');
                margin_area = container_width-item_width.width()*2;
                margin_for_each = margin_area/2;
            }
            else{
                alert('>600');
                margin_area = container_width-item_width.width()*3;
                margin_for_each = margin_area/3;
            }
            
            margin_for_each = margin_for_each - (margin_for_each%1);
            var margin_one_side = margin_for_each/2;
            margin_one_side = margin_one_side - (margin_one_side%2);
            
            item_width.css('marginLeft',margin_one_side).css('marginRight',margin_one_side);
        });
    }
    
    return {
        init: _init
    }
}

var setSizing = new SetSize();
setSizing.init();

$('#clickme').on('click',function(ev){
    ev.preventDefault();
    
    $(window).trigger('resize');
});