Рисование сетки с помощью CSS

Простое решение css

background-image: repeating-linear-gradient(0deg,transparent,transparent 70px,#CCC 70px,#CCC 71px),repeating-linear-gradient(-90deg,transparent,transparent 70px,#CCC 70px,#CCC 71px);
background-size: 71px 71px;

Пример: http://jsfiddle.net/fexpxpq4/

Я знаю, что на этот вопрос уже был дан ответ, но я проделал значительную работу над этой конкретной проблемой для проекта, над которым я работал, поэтому я решил поделиться своими выводами. Скорость рендеринга была для меня огромной проблемой, и, как и @YiJiang, я начал с добавления узлов внутри цикла, но обнаружил, что это не очень эффективное решение, поэтому я искал способы оптимизации алгоритма.

Алгоритмически говоря, петли вложенности вызывают o (n^2) сложность, которая в данном случае этого можно избежать, создав строку html один раз (поскольку она одинакова для каждой строки), а затем объединяя эту строку в каждую строку. Это приводит к O (n) сложности и, безусловно, является самым эффективным решением, которое я нашел.

function drawGrid(width, height) {
    var grid = '<div id="grid">',
        cell_html = '',
        i = 0, j = 0;

    for( ; i < width; i++) {
        cell_html += '<div class="cell"></div>';
    }

    for( ; j < height; j++) {
        grid += '<div class="row">' + cell_html + '</div>';
    }

    grid += '</div>';

    return grid;
}

Это создает базовую структуру HTML для сетки, которая затем может быть стилизована соответствующим образом с помощью CSS.

Вот решение, которое является отредактированной версией ответа @YiJiang, чтобы уменьшить его до o (n) сложности. Единственная причина, по которой я добавил свое решение, заключалась в том, что оно дополнено образцом css и jsfiddle (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
    $('<div />').css({
            'top': 1, 
            'left': i * size, 
            'width': 1, 
            'height': height })
        .addClass('gridlines')
        .appendTo('body');

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

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

createGrid(50);

Вот как бы я это сделал:

1) Сделайте изображение L, где каждая сторона L равна одному из ваших квадратов в сетке.

2) Установите это как bg изображение вашего div, повторите на оси x и y

3) Дайте вашему div 1px черную границу сверху и справа

4) у вас есть желаемый эффект!

Надеюсь, что это поможет

Редактировать после просмотра вашего комментария no images:

Почему бы просто не использовать таблицу для создания сетки (поскольку вы не сможете делать то, что хотите без изображений) и наложить таблицу с абсолютно позиционированным содержимым div?

Тремя годами позже... @user3061127, я люблю тебя!

Другие ответы великолепны, но простое использование некоторых очень простых HTML и CSS дает именно то, что я хочу. Чудесная, красивая сетка. Я бы опубликовал простой комментарий со ссылкой на скрипку, но я еще недостаточно крут, поэтому вместо этого я отвечаю.

Вот мой взгляд, основанный на вашем оригинале, который дает двухслойную сетку, которую вы видите на профессиональной графической бумаге (да, все это потому, что я слишком упрям, чтобы выйти и просто купить!)

Если у вас есть бумага разного формата, все, что вам нужно сделать, это изменить высоту и ширину #main, и вы можете идти. Если вы хотите сетку другого размера, все, что вам нужно сделать, это изменить атрибуты размера фона и размеры в фоновом изображении. Обратите внимание, что повторяющееся фоновое изображение является привередливым. Размеры должны соответствовать размеру фона, иначе вы не получите повторяющихся линий вообще.

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                margin: 0;
            }
            #main {
                height: 11in; /* Double this and print at 50% */
                position: relative;
                width: 8.5in; /* Double this and print at 50% */
            }
            .grid {
                background-image: repeating-linear-gradient(0deg,transparent,transparent 69px,#88F 69px,#88F 70px),
                                repeating-linear-gradient(-90deg,transparent,transparent 69px,#88F 69px,#88F 70px);
                background-size: 70px 70px;
                height: 100%;
                position: absolute;
                width: 100%;
            }
            .smallgrid {
                background-image: repeating-linear-gradient(0deg,transparent,transparent 13px,#CCF 13px,#CCF 14px),
                                repeating-linear-gradient(-90deg,transparent,transparent 13px,#CCF 13px,#CCF 14px);
                background-size: 14px 14px;
                height: 100%;
                position: absolute;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="smallgrid"></div>
            <div class="grid"></div>
        </div>
    </body>
</html>

Играть на скрипке: http://jsfiddle.net/ykotfuaw/5/