<div class="grid">
<div class="block block__one"></div>
<div class="block block__two"></div>
<div class="block block__three"></div>
<div class="block block__four"></div>
<div class="block block__five"></div>
<div class="block block__six"></div>
<div class="block block__seven"></div>
</div>
.grid {
display: grid;
grid-template: repeat(6, 4rem)/repeat(4, 8rem);
gap: 0.5rem;
max-width: 960px;
margin: auto;
}
.block {
border: 2px solid red;
}
.block__one {
grid-row: span 4;
}
.block__two {
grid-column: span 2;
grid-row: span 2;
}
.block__three {
grid-row: span 3;
}
.block__four {
grid-column: span 2;
grid-row: span 2;
}
.block__five {
grid-row: span 3;
}
.block__six {
grid-row: span 2;
grid-column: span 2;
}
.block__seven {
grid-row: span 2;
}
Codepen.io