Tishaa

<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>

.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;
}