<section class="grid-container">
  <div class="product_front"></div>
  <div class="jumbo"></div>
  <div class="full-length"></div>
  <div class="highlight"></div>  
  <div class="product_top"></div>
  <div class="description"></div>
</section> 
body { 
  margin: 0; 
  font-family: Courier New;
}
.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
  grid-template-rows: 100vh 80vh 80vh 200vh;
  grid-template-areas:
  "product_front product_front product_front jumbo jumbo"
  "full_length full_length full_length full_length full_length"
  "highlight highlight product_top product_top product_top"
  "description description description description description"    ;
}
.product_front {
  grid-area: product_front;
  background: rgb(241, 236, 226);
}
.jumbo {
  grid-area: jumbo;
}
.full-length {
  grid-area: full-length;
}
.highlight {
  grid-area: highlight;
}
.product_top {
  grid-area: product_top;
  background: rgb(241, 236, 226);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.