html - Responsive diamond grid -

i have selection of squares (squares turned 45° diamonds) want use make big diamond shape central red diamond.

i having issues organising diamonds , href seems fail.

• how position responsive diamonds in regular grid?

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

<a class="navigation">    <center>      <div id="diamond"></div>      <div id="diamond"></div>      <div id="diamond" href="/photos/"></div>      <div id="diamond_red"></div>      <div id="diamond" href="/projects/"></div>      <div id="diamond"></div>      <div id="diamond"></div>      <div id="diamond" href="/archive/"></div>    </center>  </a>

the responsive grid of diamons:

i don't think have right aproach achieve regular responsive diamond grid layout. simpler to:

• create responsive grid of squares (3x3 or whatever grid feel like)
• then rotate grid 45 degrees.

that way won't have fiddle borders, pseudo elements (:after, :before) , positioning each diamond.

here responsive example

it uses percentage width , padding-bottom keep diamonds responsive , transform:rotate(45deg); rotate te whole grid , make diamond grid:

body{background:#000;}  #big_diamond {    width: 50%;    margin:15% auto;    overflow:hidden;    transform: rotate(45deg);  }  .diamond {    position: relative;    float: left;    width: 31.33%;    padding-bottom: 31.33%;    margin: 1%;    background: #fff;    transition:background-color .4s;  }  .diamond {    position: absolute;    top: 0; left: 0;    width: 100%; height: 100%;  }  #red{background-color: #aa1c08;}  .diamond:hover, #red:hover{background-color:darkorange;}

<div id="big_diamond">    <div class="diamond"><a href="https://twitter.com/"></a></div>    <div class="diamond"><a href="https://twitter.com/"></a></div>    <div class="diamond"></div>    <div class="diamond"></div>    <div class="diamond" id="red"><a href="https://twitter.com/"></a></div>    <div class="diamond"></div>    <div class="diamond"></div>    <div class="diamond"></div>    <div class="diamond"></div>  </div>

as other people have mentioned, there errors in html corrected like: ids need unique , href can't used on divs.