html

<div class="main-pandora">
  <div class="pandora-grid">
    <div class="banner">
     	<img src="//cdn.shopify.com/s/files/1/2985/2180/files/Banner_Blue-01.jpg?v=1522260442" alt="Pandora Banner" />
         </div>
      <div class="item-medium item-flex">
           test
      </div>
      <div class="item-small item-flex">
           test2
      </div>
         <div class="item-small item-flex">
           test3
      </div>
      <div class="item-medium item-flex" >
           test4
      </div>
      <div class="item-wide item-flex" >
           test5
      </div>
    </div>
  </div>

scss

.pandora-main {
  padding:0;
  margin:0;

}

.pandora-grid {
  display:grid;
  grid-template-rows: repeat(20, 1fr);
  grid-template-columns: repeat(6, 1fr);
  height:100%;
  grid-gap:8px;
  

  
}

   .banner {
    	grid-row: span 3;
    	grid-column: span 6;
    
  }

	.item-medium {
  		grid-column: span 4;
 		grid-row: span 2;
  		background-color:gray;
}

	.item-small {
  		grid-column: span 2;
  		grid-row: span 2;
  		background-color:gray;
}

	.item-flex {
  		display:flex;
  		justify-content:center;
  		align-items:center;
  		color:white;
  		font-size:2em;
}

	.item-wide{
 	  	grid-column: span 6;
      		grid-row: span 2;
  	  	background-color:gray;
}