JSFiddle - React, Tailwind, and code Playground

HTML

<div class="app-grid template-without-top ">

    <div style="grid-area: t;">toast</div>
    <div style="grid-area: h;">header</div>
    <div style="grid-area: s;">sidebar</div>
    <div style="grid-area: l;">leftbar</div>
    <div style="grid-area: m;">main</div>
    <div style="grid-area: r;">rightbar</div>
    <div style="grid-area: f;">footer</div>

</div>

CSS

.app-grid {
  position:absolute;
  display: grid;
  height: 100%;
  width: 100%;
}

.app-grid > div {
  border: 1px solid blue;
  border-radius: 5px;
}


.template-with-top{
   grid-template:
    "t t t t" 40px
    "h h h h" 40px
    "s l m r" auto
    "s f f f" 57px / 200px 100px auto 100px;
}


.template-without-top{
   grid-template:
    "h h h h" 40px
    "s l m r" auto
    "s f f f" 57px  / 200px 100px auto 100px;
}
.template-without-top > div:nth-child(1) {
  display:none
 }