使用CSS繪製網格

Question

我正在尋找一種方法來繪製一個網格（即http://www.artlex.com/ArtLex/g/images/grid.gif）在一個div內，使用CSS（如果需要，JS）。感覺應該是比較直接的，但我一直沒有弄明白。任何建議將不勝感激。

謝謝你在前進， 萊尼

Answer 1

這裏有一個簡單的解決方案，使用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 2

這是怎麼我會做到這一點：

1）製作一個L的形象將L的每一側是等於你的廣場之一網格。

2）設置此爲BG您的DIV的形象，重複在X和Y軸

3）給你的div 1px的黑色邊框的頂部和右

4）你想要的效果！

希望看到你沒有圖像後幫助

編輯點評：

爲什麼不直接使用一個表，使電網（你將無法做你想做沒有圖像的）和疊加桌上有一個絕對定位的內容div？

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

這是一個解決方案，它是@ 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); 

Answer 5

一個簡單的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/