JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#container {
    width: 300px;
    height: 300px;
}
#container > .gridCell {
    float: left;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 1px solid;
}

JavaScript

var defaultNum = 3;
var url = window.location.search;
var num = parseInt(url.split('num=')[1]) || defaultNum;
var container = $('#container');
var width = container.outerWidth();
createGrid(num);

function createGrid(n) {
    if(!$.isNumeric(n) || n <= 0)
        return;
    for(var i = 0; i < n*n; i++) {
        var dimension = width/n;
        var cell = $('<div/>').addClass('gridCell').css({
            'width': dimension + 'px',
            'height': dimension + 'px'
        });
        container.append(cell);
    }
}