Rysowanie siatki przy użyciu CSS

Question

Poszukuję sposobu narysowania siatki (tj. http://www.artlex.com/ArtLex/g/images/grid.gif) wewnątrz elementu div, za pomocą kodu CSS (i JS w razie potrzeby). Wydaje się, że powinno to być stosunkowo proste, ale nie byłem w stanie tego rozgryźć. Każda rada byłaby bardzo doceniana.

Dziękuję z góry, Lenny

Answer 1

Oto proste rozwiązanie z wykorzystaniem jQuery. Ten skrypt spróbuje wypełnić jak najwięcej elementów siatki bez przepełnienia. Funkcja akceptuje pojedynczy parametr określający rozmiar siatki.

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

Wymaga to również prosty styl 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; 
} 

Zobacz proste demo tutaj: http://jsfiddle.net/yijiang/nsYyc/1/

---

Oto jeden za pomocą natywnych funkcji DOM. Należy również zmienić początkowe obliczenia stosunku do używania funkcji DOM ale nie mogę dla życia mnie dostać window.innerWidth wrócić dokładnych liczb ustalone, że:

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

Jest to w zasadzie bezpośrednie tłumaczenie kodu jQuery. Jeśli potrzebujesz jeszcze bardziej wydajność można przełączyć do generowania pola za pomocą strun popychany do tablicy:

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

następnie pod koniec

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

Answer 2

to jak chciałbym to zrobić:

1) Sprawdź, obraz litery L, gdzie każda strona L jest równy jednemu z placów w siatka.

2) ustawić to jako bg wizerunek Twojej div powtórzyć na xi osi y

3) Nadaj div do 1px czarne obramowanie w górnej i prawej

4) Masz pożądany efekt !

nadzieję, że pomoże

Edycja po obejrzeniu Twojego żadnych zdjęć komentarz:

dlaczego nie wystarczy użyć tabeli aby siatkę (jak nie będą mogli robić co chcesz bez obrazy) i nakładki tabela z pozycjonowanym div zawartości?

Answer 3

wiem, to pytanie udzielono już odpowiedzi, ale jestem wykonałem znaczną pracę nad tym problemem dla projektu, nad którym pracowałem, więc pomyślałem, że podzielę się swoimi odkryciami. Szybkość renderowania była dla mnie ogromnym problemem i podobnie jak @Yiiang, zacząłem od dołączenia węzłów z pętli, ale odkryłem, że nie jest to bardzo wydajne rozwiązanie, więc przyjrzałem się sposobom optymalizacji algorytmu.

Zrozumiałe algorytmem, pętle zagnieżdżania powodują złożoność O (n^2), której w tym przypadku można uniknąć generując wiersz html raz (ponieważ jest taki sam dla każdego wiersza), a następnie łącząc ten ciąg w każdym rzędzie .Powoduje to złożoność O (n) i jest zdecydowanie najskuteczniejszym rozwiązaniem, jakie znalazłem.

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

To tworzy podstawową strukturę HTML dla siatki, która może być odpowiednio stylizowana przy użyciu CSS.

Answer 4

Oto rozwiązanie, które jest zredagowaną wersją odpowiedzi @ YiJiang, aby zmniejszyć ją do złożoności O (n). Jedynym powodem dodałem moje rozwiązanie było to, że jest w komplecie z CSS i jsfiddle próbki (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

rozwiązaniem prostym 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; 

przykład: http://jsfiddle.net/fexpxpq4/