使用CSS绘制网格

时间:2010-11-16 04:34:28

标签: css

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

提前谢谢你, 莱尼

7 个答案:

答案 0 :(得分:39)

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

答案 1 :(得分:23)

这是一个使用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('');

答案 2 :(得分:7)

我知道这个问题已经得到了回答,但我已经为我正在进行的项目做了大量关于这个确切问题的工作,所以我想我会分享我的发现。渲染速度对我来说是个大问题,就像@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对其进行适当的样式设置。

答案 3 :(得分:4)

这是一个解决方案,它是@ 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);

答案 4 :(得分:2)

我就是这样做的:

1)制作L的图像,其中L的每一边等于网格中的一个正方形。

2)将其设置为div的bg图像,在x和y轴上重复

3)让你的div在顶部和右边有一个1px的黑色边框

4)你有所期望的效果!

希望有所帮助

看到无图像评论后编辑:

为什么不只是使用一个表来制作网格(因为你不能在没有图像的情况下做你想做的事情)并用绝对定位的内容div覆盖表格?

答案 5 :(得分:0)

三年后... @ user3061127,我爱你!

其他答案很好,但是仅使用一些非常简单的HTML和CSS即可产生我想要的结果。美妙而美丽的网格。我本来会发布一个简单的评论,并带有一个指向小提琴的链接,但我还不够酷,因此我的答案改为了。

这是我根据您的原始照片拍摄的照片,它使您可以看到在专业方格纸上看到的两层网格外观(是的,这是因为我太固执了,不能出去买些东西!)

如果您使用不同尺寸的纸张,则只需更改#main的高度和宽度即可。如果要使用其他尺寸的网格,则只需更改background-size属性和background-image中的尺寸即可。请注意,重复的背景图像是挑剔的。尺寸必须与背景尺寸匹配,否则您将根本没有重复的行。

<!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/

答案 6 :(得分:0)

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); 
}

这是你想要的