title: Big grid with minimum of 1000000 divs
body: <p>My idea is to create a big number of divs using php or js. (I write js since yesterday.)</p>
  
  <p>So my self given task is to generate a grid of divs using php or js or both.
  The idea so far is to have one general div as row and small cells inside. First I determine using php variable how long the row must be and after that I define the number of rows [easy so far]. My problem comes when I generate my grid. Using only php is VERY slow so I decided to use js as well. My first try resulted in cutting the time in half but still slow. So I asked myself is there a way to divide the work of js? Well yes... using functions of course! So I made a function called sector and tried to call it. It worked but still too slow. So what are the best practices for doing such a thing?</p>
  
  <pre><code>    &lt;?php
  $rowWidth = 200;                                  // width in pixels
  $rowHeight = 100;                                 // height in pixels
  $boxWidth = 1;                                  // box width in pixels
  $boxHeight = 1;                                 // box height in pixels
  ?&gt;
  &lt;body&gt;
      &lt;script&gt;
      function sector(sector) {
          for (var i = 0*sector; i &lt; (&lt;?php echo $rowHeight / 100 ?&gt; + 100*sector); i++) { // trying to manage sectors
              var div = document.createElement('div');
              // set style
              div.style.width = '&lt;?php echo $rowWidth ?&gt;';
              div.style.height = '&lt;?php echo $boxHeight ?&gt;';
              div.style.background = 'red';
              div.setAttribute('class', 'row'); // and make a class for future css (for now using inline css set by js)
              div.setAttribute('id', 'row'+i); // and make an id selector
              document.body.appendChild(div);
              for (var e = 0; e &lt; &lt;?php echo $rowWidth ?&gt;; e++) {
                  var box = document.createElement('div');
                  // set style
                  box.style.width = '&lt;?php echo $boxWidth ?&gt;';
                  box.style.height = '&lt;?php echo $boxHeight ?&gt;';
                  box.style.float = 'left';
                  box.style.background = 'pink';
                  box.setAttribute('class', 'box'); // and make a class for future css (for now using inline css set by js)
                  box.setAttribute('id', 'box'+e); // and make an id selector
                  document.getElementById('row'+i).appendChild(box); // joining my row
              }
          }
      }
      &lt;?php for ($sector=0; $sector &lt; ($rowWidth / 100) ; $sector++) { ?&gt;
          //calling all sectors, calling all sectors... please report
          sector(&lt;?php echo $sector+1 ?&gt;);
      &lt;?php } ?&gt;
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong>
  This looks similar to my idea.</p>
  
  <p><a href="http://www.businessinsider.com/reddit-place-april-fools-experiment-creates-pixel-art-final-version-2017-4" rel="nofollow noreferrer">http://www.businessinsider.com/reddit-place-april-fools-experiment-creates-pixel-art-final-version-2017-4</a></p>
  
  <p>How did they make it?</p>