<div class="container">
<div class="item box-big1">A</div>
<div class="item box-big6">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item box-big2">F</div>
<div class="item box-big3">G</div>
<div class="item">H</div>
<div class="item">I</div>
<div class="item">J</div>
<div class="item box-big4">K</div>
</div>
.item {
background: #ddd;
padding: 10px;
border-radius: 4px;
}
.container{
display: grid;
grid-gap: 10px;
grid-template-columns: 1.5fr 1fr 1fr 3fr;
grid-template-rows: 180px 100px 80px 120px auto;
}
.box-big1{
grid-column: 1;
grid-row: 1 / span 3;
background: #F6D580;
}
.box-big2{
grid-column: 3 / 5;
background: #6BBED5;
}
.box-big3{
grid-column: 2 / 4;
grid-row: 3 / 5;
background: #C97FB4;
}
.box-big4{
grid-column: 1 / span 4;
grid-row: auto;
background: #64C99B;
}
@media (max-width: 600px){
.container{
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.box-big1,.box-big2,.box-big3,.box-big4{
grid-column: 1;
grid-row: auto;
}
}
Also see: Tab Triggers