Размещение ромбов на странице

#main { 
  width: 780px; 
  margin: 0 auto; 
  position: relative; 
  height: 500px; 
} 
.big { 
  width: 210px; 
  height: 210px; 
  background: #1e90ff; 
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
  margin: 10px; 
  position: absolute; 
  top: 40px; 
} 
.big.big2 { 
  left: 224px; 
} 
.big.big3 { 
  left: 448px; 
} 
.group { 
  position: relative; 
} 
.group.group0 { 
  width: 1000px; 
  position: absolute; 
  top: 10px; 
} 
.group.group1 { 
  position: absolute; 
  top: -7px; 
  left: 112px; 
} 
.group.group2 { 
  position: absolute; 
  top: -7px; 
  left: 335px; 
} 
.group.group3 { 
  position: absolute; 
  top: 107px; 
  left: 335px; 
} 
.group.group3 .small3 { 
  top: 111px; 
} 
.group.group3 .small1 { 
  top: 111px; 
} 
.group.group4 { 
  position: absolute; 
  top: 107px; 
  left: 112px; 
} 
.group.group4 .small3 { 
  top: 111px; 
} 
.group.group4 .small1 { 
  top: 111px; 
} 
.small { 
  position: absolute; 
  width: 100px; 
  height: 100px; 
  background: red; 
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
  margin: 10px; 
} 
.small.small2 { 
  top: 55px; 
  left: 55px; 
} 
.small.small3 { 
  left: 110px; 
} 
/* Center the demo */ 
html, 
body { 
  height: 100%; 
} 
body { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
}

<div id="main"> 
  <div class="group group0"> 
    <div class="big big1"></div> 
    <div class="big big2"></div> 
    <div class="big big3"></div> 
  </div> 
  <div class="group group1"> 
    <div class="small small1"></div> 
    <div class="small small2"></div> 
    <div class="small small3"></div>  
  </div> 
  <div class="group group2"> 
    <div class="small small1"></div> 
    <div class="small small2"></div> 
    <div class="small small3"></div>  
  </div> 
   <div class="group group3"> 
    <div class="small small1"></div> 
    <div class="small small2"></div> 
    <div class="small small3"></div>  
  </div> 
  <div class="group group4"> 
    <div class="small small1"></div> 
    <div class="small small2"></div> 
    <div class="small small3"></div>  
  </div> 
</div>