Drawing a grid using CSS

Question

I\'m looking for a way to draw a grid (i.e. http://www.artlex.com/ArtLex/g/images/grid.gif) inside of a div, using CSS (and JS if necessary). It feels like it should be relative

Answer 1

Here is a solution that is an edited version of @YiJiang's answer to reduce it to O(n) complexity. The only reason I added my solution was that it is complete with css and jsfiddle sample (http://jsfiddle.net/madstop/bM5Kr/)

css:

.gridlines { display: none; position:absolute; background-color:#ccc; }

javascript/jquery:

function createGrid(size) {
var i, 
    height = $(window).height(),
    width = $(window).width(),
    ratioW = Math.floor(width/size),    
    ratioH = Math.floor(height/size); 

for (i=0; i<= ratioW; i++)  // vertical grid lines
    $('
').css({
            'top': 1, 
            'left': i * size, 
            'width': 1, 
            'height': height })
        .addClass('gridlines')
        .appendTo('body');

    for (i=0; i<= ratioH; i++) // horizontal grid lines
        $('
').css({
            'top': 1 + i * size, 
            'left': 0, 
            'width': width, 
            'height': 1 })
        .addClass('gridlines')
        .appendTo('body');

    $('.gridlines').show();
}

createGrid(50);