<div class="grid">
<div class="grid-item grid-item--1">1</div>
<div class="grid-item grid-item--2">2</div>
<div class="grid-item grid-item--3">3</div>
<div class="grid-item grid-item--4">4</div>
<div class="grid-item grid-item--5">5</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(6, auto);
grid-gap: 20px;
}
.grid-item {
padding: 50px 20px;
background-color: red;
}
.grid-item--1 {
grid-column: 1 / 4;
}
.grid-item--2 {
grid-column: 4 / -1;
}
.grid-item--3,
.grid-item--4,
.grid-item--5 {
grid-column: span 2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.