render grid

HTML

<div id="here"></div>

CSS

.grid{
    position:absolute;        
}
.item{
    position:absolute;
    width:25px;
    height:25px;
    background:#000;   
}

JavaScript

var grid = [
    { x: 50, y: 15},
    { x: 85, y: 0},
    { x: 15, y: 0},
    { x: 15, y: 45},
    
    { x: 15, y: 45},
    { x: 50, y: 55},
    { x: 85, y: 45}
];
function renderGrid(xpos, ypos, xdirection, ydirection, xmod, ymod) {
    console.log(grid);

    var gridParent, gridItem, css;
    
    gridParent = $('<div>').addClass('grid').css({
        left: xpos,
        top: ypos
    });
    
    css = {};
    
    for (var i = 0, l = grid.length; i < l; i++) {
        
        css[xdirection] = grid[i].x * xmod;
        css[ydirection] = grid[i].y * ymod;
            
        gridItem = $("<div>").addClass('item').css(css);
       
        gridParent.append(gridItem);
    }
    
    $('#here').append(gridParent);
    
}

//renderGrid(100, 100, 'left', 'top', 1, -1);

renderGrid(80, 150, 'top', 'left', 1, -1);
renderGrid(100, 100, 'left', 'top', 1, -1);
//renderGrid(100, 300, 'left', 'top', 1, 1);
renderGrid(230, 150, 'top', 'left', 1, 1);