div {
  border: 1px solid #000;
}

.top-row, .bottom-row {
  width: 100%;
}

.main-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  width: 100%;
}

<div class="top-row">Top</div>
<div class="main-row">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="bottom-row">Bottom</div>

<style>
.angry-grid {
   display: grid; 

   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   
   gap: 0px;
   height: 100%;
   
}
  
#item-0 {

   background-color: #e6b8d5; 
   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 6;
   
}
#item-1 {

   background-color: #b989ce; 
   grid-row-start: 2;
   grid-column-start: 1;

   grid-row-end: 4;
   grid-column-end: 3;
   
}
#item-2 {

   background-color: #77b957; 
   grid-row-start: 2;
   grid-column-start: 3;

   grid-row-end: 4;
   grid-column-end: 6;
   
}
#item-3 {

   background-color: #ba997d; 
   grid-row-start: 4;
   grid-column-start: 1;

   grid-row-end: 5;
   grid-column-end: 6;
   
}
</style>

<div class="angry-grid">
  <div id="item-0">TOP_ROW</div>
  <div id="item-1">LEFT</div>
  <div id="item-2">RIGHT</div>
  <div id="item-3">BOT</div>
</div>