JSFiddle - React, Tailwind, and code Playground

HTML

<div class="app-grid">
    <div style="grid-area: t; height: 40px; display: none;">t</div>
    <div style="grid-area: h;">h</div>
    <div style="grid-area: s;">s</div>
    <div style="grid-area: l;">l</div>
    <div style="grid-area: m;">m</div>
    <div style="grid-area: r;">r</div>
    <div style="grid-area: f;">f</div>
</div>

CSS

.app-grid {
  display: grid;
  height: 100vh;
  grid-template:
    "t t t t" auto
    "h h h h" 40px
    "s l m r" 1fr
    "s f f f" 57px;
}

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

body {
  margin: 0;
}