<div class="block">
<div class="item item--big"></div>
<div class="item item--big"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.block {
display: grid;
grid-template-columns: 1fr;
grid-gap: 20px;
width: 80%;
margin: 20px auto;
}
.item {
background: deepskyblue;
height: 50px;
}
@media (min-width: 400px) {
.block {
grid-template-columns: repeat(2, 1fr);
}
.item--big {
grid-column: span 2;
}
}
@media (min-width: 768px) {
.block {
grid-template-columns: repeat(4, 1fr);
}
}