title: How to create a grid of elements (divs/spans) in perfect squares with their backgrounds set to images
body: <p>I've been working on a website that serves as a gallery for fantasy art, an evolving project, and I've currently hit a barricade in where to go from something I can't get to work. I tried Masonry and Wookmark both, and had issues with both, so I'm trying to do something else. I'm wanting to spawn in either divs or spans (I'm not sure which to use) within <code>grid</code> with the class identifier <code>images</code> and set their backgrounds to specific image sources that "cover", centered, so I basically have a grid of square windows into these images and when clicked, they bring up a lightbox (which I've succesfully created). Right now I've managed to get the images to show but the containers are smooshed down and have no padding left or right. </p>
  
  <p>Truth be told, I have no idea what to do with the relative/absolute positioning and inline/block display parameters, and I feel this is where I'm going wrong but I don't know really what these things entail.</p>
  
  <p>Segment of the HTML:</p>
  
  <pre><code>&lt;div id="grid" class="grid"&gt;&lt;/div&gt;
  &lt;br&gt;
  </code></pre>
  
  <p>CSS:      </p>
  
  <pre><code>.grid {
    z-index:2;
    display: inline-block;
  }
  
  .images {
    display:inline-block;
    position:relative;
    width:25%;
    height:25%;
    z-index:2;
    padding-right: 0.25em;
    padding-left: 0.25em;
    padding-top: 0.5em;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var mix = shuffle(Object.keys(backInfo));                 
  
  
  function unlockImages () {      
    setTimeout(function () {          
      if (mix !== undefined) { 
        var input = mix.shift();
        var entry = backInfo[input];
        var elem = document.createElement("div");
        elem.setAttribute("class", "images");
        elem.setAttribute("id", input);
        elem.setAttribute("title", entry.caption);
        elem.setAttribute("onclick", "javascript:changeImage(" + input + ");");
        document.getElementById("grid").appendChild(elem);
        document.getElementById(input).style.backgroundImage = "url(" + entry.image + ")";
        $("#" + input).fadeTo(0,0);
        $("#" + input).fadeTo(20000,1);
        unlockImages();
      }
    }, 0)
  }
  </code></pre>
  
  <p>And a live preview of what's going on at the moment: <a href="http://www.dreamquest.io" rel="nofollow">http://www.dreamquest.io</a></p>