使用CSS绘制网格_Css - Fatal编程技术网

使用CSS绘制网格

css

使用CSS绘制网格,css,Css,我正在寻找一种在div内部使用CSS（必要时使用JS）绘制网格的方法。感觉应该是比较直截了当的，但我还没弄明白。如有任何建议，将不胜感激提前谢谢大家,，莱尼我就是这样做的： 1）制作一个L的图像，其中L的每一侧等于网格中的一个正方形 2）将此设置为div的bg图像，在x轴和y轴上重复 3）在顶部和右侧为您的div添加1像素的黑色边框 4）你达到了预期的效果希望有帮助看到您的“无图像”评论后进行编辑：为什么不使用一个表来创建网格（因为没有图像，您将无法做您想要做的事情）并用绝对定

我正在寻找一种在div内部使用CSS（必要时使用JS）绘制网格的方法。感觉应该是比较直截了当的，但我还没弄明白。如有任何建议，将不胜感激

提前谢谢大家,，莱尼

我就是这样做的：

1）制作一个L的图像，其中L的每一侧等于网格中的一个正方形

2）将此设置为div的bg图像，在x轴和y轴上重复

3）在顶部和右侧为您的div添加1像素的黑色边框

4）你达到了预期的效果

希望有帮助

看到您的“无图像”评论后进行编辑：

为什么不使用一个表来创建网格（因为没有图像，您将无法做您想要做的事情）并用绝对定位的内容div覆盖该表呢？

下面是一个使用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);
        }
    }
}

在这里查看一个简单的演示：

下面是一个使用本机DOM函数的示例。我还应该将初始比率计算更改为使用DOM函数，但在我的整个生命周期中，我无法获取

窗口。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);

我知道这个问题已经得到了回答，但我在一个项目中对这个问题做了大量的工作，所以我想我会分享我的发现。渲染速度对我来说是一个巨大的问题，就像@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;
}

功能绘图网格（宽度、高度）{
变量网格=“”，
单元格\u html=“”，
i=0，j=0；
对于（；i


这为网格创建了基本的HTML结构，然后可以使用CSS对其进行适当的样式设置。
这里有一个解决方案，它是@YiJiang答案的编辑版本，可以将其简化为O（n）复杂度。我添加我的解决方案的唯一原因是它包含了css和JSFIDLE示例（）
css:
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);

函数createGrid（大小）{
var i，
高度=$（窗口）.height（），
宽度=$（窗口）.width（），
ratioW=数学地板（宽度/尺寸），
ratioH=数学地板（高度/尺寸）；
对于（i=0；i，这里有一个简单的CSS专用解决方案，使用线性渐变：

html，
身体，
.电网{
身高：100%；
宽度：100%；
保证金：0；
}
.电网{
背景图像：
重复线性梯度（#ccc 0 1px，透明1px 100%），
重复线性梯度（90度，#ccc 0 1px，透明1px 100%）；
背景尺寸：71px 71px；
}
三年后…@user3061127，我爱你
其他答案都很好，但仅仅使用一些非常简单的HTML和CSS就可以得到我想要的结果。一个美妙、美丽的网格。我本来会发布一条带有小提琴链接的简单评论，但我还不够酷，因此我的答案就取而代之了
这是我根据你的原创作品拍摄的照片，它给了你在专业图表纸上看到的两层网格外观（是的，这一切都是因为我太固执了，不想出去买一些！）
如果纸张大小不同，只需更改#main的高度和宽度即可。如果需要不同大小的网格，只需更改背景大小属性和背景图像中的尺寸。请注意，重复的背景图像很挑剔。尺寸必须与o背景大小，否则您将不会得到任何重复线
<!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>


html，正文{
保证金：0；
}
#主要{
高度：11英寸；/*加倍，50%打印*/
位置：相对位置；
宽度：8.5英寸；/*加倍并以50%打印*/
}
.电网{
背景图像：重复线性渐变（0度，透明，透明69px，#88F 69px，#88F 70px），
重复线性梯度（-90度，透明，透明69px，#88F 69px，#88F 70px）；
背景尺寸：70px 70px；
身高：100%；
位置：绝对位置；
宽度：100%；
}
.小电网{
背景图像：重复线性渐变（0度，透明，透明13px，#CCF 13px，#CCF 14px），
重复线性梯度（-90度，透明，透明13px，#CCF 13px，#CCF 14px）；
背景尺寸：14px 14px；
身高：100%；
位置：绝对位置；
宽度：100%；
}

小提琴：
“纯CSS”和精确的100px2网格。
（最高投票权的一种变化。）

body{box大小：边框框；边距：0；高度：100%；宽度：100%；背景大小：100px 100px；
背景图像：重复线性渐变（0度，透明，透明99px，#ccc 99px，#ccc 100px），
重复线性梯度（-90度，透明，透明99px，#ccc 99px，#ccc 100px）；
}在我的例子中，理想解决方案的可能副本将不涉及图像，因为我需要动态缩放网格，并用各种颜色填充块。我可以用不同的图像类型来管理这一点，但这将非常困难
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;
}

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

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

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