JSFiddle - React, Tailwind, and code Playground

by javadoug

HTML

<div class="wrapper">
    <div class="zero"></div>
</div>

CSS

.wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid blue;
}
.zero {
    position: absolute;
    top: 97px;
    left: 97px;
    width: 6px;
    height: 6px;
    background-color: red;
}
.gridX {
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: red;
    border: 0;
}
.gridY {
    position: absolute;
    width: 100%;
    height: 1px;
    border: 0;
    background-color: green;
}

JavaScript

var zeroX = 100;
var zeroY = 100;

function addXaxis(band) {
    band = band || 1;
    var i;
    var width = 200; //$('.wrapper').outerWidth();
    var count = (width / band) + 1;
    for (i = 0; i < count; i++) {
        var offset = zeroX % band;
        var axisX = zeroX - (width - (i * band)) + offset;
        var x = parseInt(axisX / band, 10);
        $('<div>').html(x).appendTo('.wrapper').addClass('gridX').css({
            left: ((i * band) - offset) + 'px'
        });
    }
}

function addYaxis(band) {
    band = band || 1;
    var i;
    var height = 200; //$('.wrapper').outerHeight();
    var count = (height / band) + 1;
    for (i = 0; i < count; i++) {
        var offset = zeroY % band;
        var axisY = (height - (i * band)) - zeroY - offset;
        var y = parseInt(axisY / band, 10);
        $('<div>').html(y).appendTo('.wrapper').addClass('gridY').css({
            top: ((i * band) - offset) + 'px'
        });
    }
}

addXaxis(20);
addYaxis(20);