Рисование сетки с использованием CSS

Ответ 1

Здесь простое решение, использующее jQuery. Этот script будет пытаться заполнить как можно больше элементов сетки без переполнения. Функция принимает единственный параметр, который определяет размер сетки.

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

    var parent = $('<div />', {
        class: 'grid',
        width: ratioW  * size,
        height: ratioH  * size
    }).addClass('grid').appendTo('body');

    for (var i = 0; i < ratioH; i++) {
        for(var p = 0; p < ratioW; p++){
            $('<div />', {
                width: size - 1,
                height: size - 1
            }).appendTo(parent);
        }
    }
}

Он также требует простого стиля CSS:

.grid {
    border: 1px solid #ccc;
    border-width: 1px 0 0 1px;
}

.grid div {
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
    float: left;
}

Смотрите простую демонстрацию здесь: http://jsfiddle.net/yijiang/nsYyc/1/

Здесь можно использовать собственные функции DOM. Я также должен изменить исходный коэффициент вычисления для использования функций DOM , но я не могу на всю жизнь получить window.innerWidth, чтобы вернуть точные числа, что:

function createGrid(size) {
    var ratioW = Math.floor((window.innerWidth || document.documentElement.offsetWidth) / size),
        ratioH = Math.floor((window.innerHeight || document.documentElement.offsetHeight) / size);

    var parent = document.createElement('div');
    parent.className = 'grid';
    parent.style.width = (ratioW * size) + 'px';
    parent.style.height = (ratioH * size) + 'px';

    for (var i = 0; i < ratioH; i++) {
        for (var p = 0; p < ratioW; p++) {
            var cell = document.createElement('div');
            cell.style.height = (size - 1) + 'px';
            cell.style.width = (size - 1) + 'px';
            parent.appendChild(cell);
        }
    }

    document.body.appendChild(parent);
}

createGrid(10);

Это в основном прямой перевод кода jQuery. Если вам нужна еще большая производительность, вы можете переключиться на создание ящиков, используя строки, перенесенные в массив:

arr.push('<div style="width:', (size - 1), 'px;height:', (size - 1), 'px;"></div>');

то в конце

parent.innerHTML = arr.join('');

Ответ 2

Вот простое решение только для CSS с использованием линейных градиентов:

html, body, .grid {
    height: 100%;
    width: 100%;
    margin: 0;
}

.grid {
    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;
}

<div class="grid"></div>

Ответ 3

Я знаю, что на этот вопрос уже был дан ответ, но я проделал значительную работу над этой точной проблемой для проекта, над которым я работал, поэтому я решил поделиться своими выводами. Скорость рендеринга была большой проблемой для меня, и, как @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.

Ответ 4

Вот решение, которое является отредактированной версией ответа @YiJiang, чтобы уменьшить его до сложности O (n). Единственная причина, по которой я добавил свое решение, заключалась в том, что она заполнена css и 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
    $('<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);

Ответ 5

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

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

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

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

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

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

Редактировать после просмотра комментария к вашим изображениям:

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

Ответ 6

Три года спустя... @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/