title: Responsive diamond grid
body: <p>I have a selection of squares (squares turned 45° to look like diamonds) which I want to use to make up a big <strong>diamond shape</strong> with a central red diamond. </p>
  
  <p>I am having issues organising the diamonds themselves and the <code>href</code> seems to fail.</p>
  
  <ul>
  <li>How do I <strong>position the responsive diamonds in a regular grid</strong>?</li>
  </ul>
  
  <p>Her is <a href="http://jsfiddle.net/5Q8qE/" rel="nofollow">my code</a>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: black;
    color: #000000;
    font: 13px georgia, serif;
    line-height: 1.4;
    font-weight: lighter;
    text-rendering: optimizelegibility;
  }
  #diamond {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: white;
    position: relative;
    top: -50px;
  }
  #diamond:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: white;
  }
  #diamond_red {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: #AA1C08;
    position: relative;
    top: -50px;
  }
  #diamond_red:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: #AA1C08;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="navigation"&gt;
    &lt;center&gt;
      &lt;div id="diamond"&gt;&lt;/div&gt;
      &lt;div id="diamond"&gt;&lt;/div&gt;
      &lt;div id="diamond" href="/photos/"&gt;&lt;/div&gt;
      &lt;div id="diamond_red"&gt;&lt;/div&gt;
      &lt;div id="diamond" href="/projects/"&gt;&lt;/div&gt;
      &lt;div id="diamond"&gt;&lt;/div&gt;
      &lt;div id="diamond"&gt;&lt;/div&gt;
      &lt;div id="diamond" href="/archive/"&gt;&lt;/div&gt;
    &lt;/center&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>