<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.