JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="container">
  <div class="alpha"></div>



  <div class="beta">
    <div class="beta-component">
      <h2 class="beta-header">beta</h2>
      <div class="beta-content">
        That'll create a grid that's four columns wide by three rows tall. The entire top row will be comprised of the header area. The middle row will be comprised of two main areas, one empty cell, and one sidebar area. The last row is all footer.</div>
    </div>
  </div>




  <div class="gamma">gamma</div>

  <div class="zeta">
    That'll create a grid that's four columns wide by three rows tall. The entire top row will be comprised of the header area. The middle row will be comprised of two main areas, one empty cell, and one sidebar area. The last row is all footer.
  </div>
  <div class="pi">pi</div>
  <div class="markets"></div>

</div>

CSS

body {
  margin: 0;
}

.container {
  display: grid;
  background: pink;
  width: 90vw;
  grid-gap: 8px;
  height: 90vh;
  margin-left: 5vw;
  margin-top: 5vh;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
  grid-template-areas: 
    "alpha alpha alpha alpha alpha"
    "beta beta gamma gamma zeta"
    "pi pi pi pi pi"
  
  ;
}

.alpha {
  background: yellow;
  grid-area: alpha;
}

.beta {
  background: red;
  grid-area: beta;

  
}

.beta-component {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto;
  grid-template-areas:
    "beta-header"
    "beta-content";
}

.beta-header {
  grid-area: beta-header;
  margin: 0;
}

.beta-content {
  grid-area: beta-content;
  overflow: scroll;
}

.gamma {
  background: green;
  grid-area: gamma;
}

.pi {
  grid-area: pi;
  background: lightblue;
}

.zeta {
  background: orange;
  overflow:scroll;
  grid-area: zeta;
}

.markets {
  background: blue;
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end:4;
  z-index: 2;
}