<section class="grid-1">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
</section>
body {
padding-top: 40px;
background: #f5f7f8;
}
$bgColors: #b03532 #33a8a5 #30997a #6a478f #da6f2b #3d8bb1;
.grid-1 {
display: grid;
width: 100%;
max-width: 600px;
margin: 0 auto;
grid-template-columns: 300px 200px 100px;
grid-template-rows: 100px 50px;
div {
color: white;
font-size: 20px;
padding: 20px;
@for $i from 1 through length($bgColors) {
&:nth-child(#{$i}){
background: nth($bgColors, $i);
}
}
}
}
.item-1 {
grid-area: 1 / 1 / 2 / 4;
}
.item-2 {
grid-area: 2 / 1 / 4 / 2;
}
.item-4 {
grid-area: 2 / 3 / 4 / 4;
}
.item-6 {
grid-area: 4 / 1 / 5 / 4;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.