JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="item-header">header</div>
  <div class="item-nav">navigation</div>
  <div class="item-leftcol">left col</div>
  <div class="item-centercol">test test test test test test test test test tetesest test test test test test
    </div>
  <div class="item-rightcol">right col</div>
  <div class="item-footer">footer</div>
</div>

CSS

.wrapper {
  min-height: 100vh;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 6.5fr 7.5fr 79fr 7fr;
  grid-template-areas: "header header header" 
                      "navigation navigation navigation"
                      "column-left column-center column-right"
                       "footer footer footer";
}

.item-header {
  grid-area: header;
  background-color: aqua;
}

.item-nav {
  grid-area: navigation;
  background-color: lightgrey;
}

.item-leftcol {
  grid-area: column-left;
  background-color: lightgreen;
}

.item-centercol {
  grid-area: column-center;
}

.item-rightcol {
  grid-area: column-right;
  background-color: yellow;
}

.item-footer {
  grid-area: footer;
  background-color: gray;
}

* {
  margin: 0;
  padding: 0;
}