изучай
HTML
<div class="wrap">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
<div class="item item-4"></div>
</div>
css
.wrap{
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 20px 100px;
height: 500px;
gap: 5px;
}
.item-1 {
background-color: aqua;
width: 100%;
height: 100%;
grid-row: 1 / 2;
}
.item-2 {
background-color: rgb(26, 141, 72);
width: 100%;
height: 100%;
grid-row: 1 / 3;
}
.item-3 {
background-color: blueviolet;
width: 100%;
height: 100%;
grid-row: 2 / 4;
}
.item-4 {
background-color: rgb(188, 104, 24);
width: 100%;
height: 100%;
grid-row: 3 / 4;
}
