JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
    <div class='icon'>1</div>
    <div class='icon'>2</div>
    <div class='icon'>3</div>
    <div class='icon'>4</div>
    <div class='icon'>5</div>
    <div class='icon'>6</div>
    <div class='icon'>7</div>
    <div class='icon'>8</div>
    <div class='icon'>9</div>
</div>

CSS

.container {
    width: 100%;
    height: 250px;
    background: #EEE;
    position: relative;
}
.container .icon {
    position: absolute;
    width: 50px;
    height: 50px;
    background: coral;
}

JavaScript

$.fn.iconizer = function(options) {
    
    options = $.extend({
        selector: '.icon',
        marginTop: 10,
        marginLeft: 10
    }, options);
    
    return this.each(function() {
        
        var $container = $(this),
            $icons = $(options.selector, $container),
            containerHeight = $(this).height(),
            iconHeight = $($icons[0]).height(),
            iconWidth = $($icons[0]).width(),
            numberFit = Math.floor(containerHeight / (iconHeight + options.marginTop)),
            top = 0,
            left = 0;
        
        $icons.each(function(i) {
            if (i % numberFit == 0 && i > 0) {
                top = 0;
                left += iconWidth + options.marginLeft;
            }
            top = top + options.marginTop;
            $(this).css({
                top: top,
                left: left + options.marginLeft
            });
            top += iconHeight;
        });
    });
};

$('.container').iconizer();

function l(e) {console.log(e)}