<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>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</section>
body {
padding-top: 20px;
background: #f5f7f8;
}
.grid-1 {
display: grid;
width: 100%;
max-width: 750px;
margin: 0 auto;
grid-template-columns: 1fr 1fr minmax(160px, 1fr);
grid-gap: 20px;
position: relative;
}
/* items */
.grid-1 div {
color: white;
font-size: 20px;
padding: 20px;
}
/* specific item styles */
.item-1 {
background: #b03532;
}
.item-2 {
background: #33a8a5;
position: absolute;
grid-area: 3 / 2;
}
.item-3 {
background: #30997a;
}
.item-4 {
background: #6a478f;
}
.item-5 {
background: #da6f2b;
}
.item-6 {
background: #3d8bb1;
}
.item-7 {
background: #e03f3f;
}
.item-8 {
background: #59a627;
}
.item-9 {
background: #4464a1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.