JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

body {
        padding: 0;
        margin: 0;
    }
    #container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #f00;
    }
    #container .cell {
        background: #fff url('http://webneel.com/sites/default/files/images/project/best-portrait-photography-regina-pagles%20(10).jpg') no-repeat center;
        background-size: 100% 100%;
        position: absolute;
    }

JavaScript

var container = $('#container');
    var height = container.outerHeight();
    var width = container.outerWidth();
    // var img = $();

    function populate(n){
        var rem_items = n;
        var rows = Math.round(Math.sqrt(n));
        var row_items = Math.ceil(n/rows);

        for (var i=0; i<rows; i++){

            // check if remaining items count is perfect square
            // this prevents us from generating a lonely single box in a row
            if( (rem_items%(rows-i))===0 ){
                row_items = rem_items/(rows-i);
            }

            if(rem_items<row_items){
                row_items = rem_items;
            }

            rem_items = rem_items-row_items;

            for (var j=0; j<row_items; j++){
                var img_height = height/rows;
                var img_width = width/row_items;
                var img_left = j*img_width;
                var img_top = i*img_height;
                var img = $('<div class="cell"></div>');
                img.css({
                    width: img_width,
                    height: img_height,
                    left: img_left,
                    top: img_top
                });
                container.append(img);
            }
        }
    }

    populate(40);