JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-container">
  <div class="header"> HEADER </div>
  <div class="border-left"></div>
  <div class="grid-item">1 </div>
  <div class="grid-item">2 </div>
  <div class="grid-item">3 </div>
  <div class="grid-item">4 </div>
  <div class="border-bottom"></div>
</div>

SCSS

$header-height: minmax(50px, 2fr);
$border-width: 5px;
$border-bottom: 15px;

.grid-container {
  display: grid;
  grid-template-columns: $border-width 1fr 1fr;
  grid-template-rows: $header-height 1fr 1fr 1fr 1fr 1fr $border-bottom;
}

.grid-item {
  width: 1fr;
}

.header {
  display: flex;
  grid-column: 2/-1;
  grid-row: 1/1;
  justify-content: center;
}

.border-left {
  background: purple;
  grid-column: 1/1;
  grid-row: 1/-1;
}
.border-bottom{
  background: #410266;
  grid-column: 2/-1;
  /* grid-row: -2 / -1;  this will work, -1/-1 will not */
  grid-row: -1 / -1;
  
}