SOURCE

//https://cssgrid-generator.netlify.app/

<div class="parent border-2 border-black">
    <div class="div1 border-2 border-black p-10">1</div>
    <div class="div2 border-2 border-black p-10">2</div>
    <div class="div3 border-2 border-black p-10">3</div>
    <div class="div4 border-2 border-black p-10">4</div>
    <div class="div5 border-2 border-black p-10">5</div>
    <div class="div6 border-2 border-black p-10">6</div>
    <div class="div7 border-2 border-black p-10">7</div>
    <div class="div8 border-2 border-black p-10">8</div>
    <div class="div9 border-2 border-black p-10">9</div>
</div>

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 2 / 3 / 4; }
.div2 { grid-area: 1 / 1 / 2 / 2; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 3 / 1 / 4 / 2; }
.div5 { grid-area: 1 / 4 / 2 / 5; }
.div6 { grid-area: 2 / 4 / 3 / 5; }
.div7 { grid-area: 3 / 4 / 4 / 5; }
.div8 { grid-area: 3 / 2 / 4 / 3; }
.div9 { grid-area: 3 / 3 / 4 / 4; }