JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="div1"> 1</div>
  <div class="div2"> 2</div>
  <div class="div3"> 3</div>
  <div class="div4"> 4</div>
  <div class="div5">5 </div>
  <div class="div6"> 6</div>
  <div class="div7"> 7</div>
</div>

CSS

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

.div1 { grid-area: 1 / 1 / 6 / 2; background-color: yellow; height: 100vh;}
.div2 { grid-area: 1 / 5 / 6 / 6; background-color: red;}
.div3 { grid-area: 1 / 2 / 2 / 5; background-color: blue;}
.div4 { grid-area: 2 / 2 / 3 / 5; background-color: pink;}
.div5 { grid-area: 3 / 2 / 4 / 5; background-color: orange;}
.div6 { grid-area: 4 / 2 / 5 / 5; background-color: purple;}
.div7 { grid-area: 5 / 2 / 6 / 5; background-color: pink;}