使用CSS绘制网格

Question

我正在寻找一种方法在div中绘制网格(即http://www.artlex.com/ArtLex/g/images/grid.gif),使用CSS(如有必要,还可以使用JS).感觉它应该是相对直接的,但我无法弄明白.任何建议将不胜感激.

Lenny,提前谢谢你

Answer 1

一个简单的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;
}

示例:http://jsfiddle.net/fexpxpq4/

Answer 2

这是一个使用jQuery的简单解决方案.此脚本将尝试尽可能多地填充网格元素而不会溢出.该函数接受单个参数,该参数定义网格的大小.

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('');

Answer 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对其进行适当的样式设置.

Answer 4

“纯 CSS”和 100px ²网格。

（上面得票最高的答案的变体。）

body { box-sizing:border-box; margin:0; height:100%; width:100%; background-size:100px 100px;
       background-image: repeating-linear-gradient(0deg, transparent, transparent 99px, #ccc 99px, #ccc 100px), 
       repeating-linear-gradient(-90deg, transparent, transparent 99px, #ccc 99px, #ccc 100px); 
     }