JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="header"> Header Header Header Header Header</div>
  <div class="main">
    <div class="sidebar">Sidebar Sidebar </div>
    <div class="box-content">
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>      
    </div>
  </div>
  <div class="footer"> Footer Footer Footer Footer Footer </div>
</div>

CSS

.wrapper {
  height: 100vh;
  display: grid;
  align-content: stretch;
  justify-content: stretch;
  grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr;
  grid-template-rows: 1fr 5fr 1fr;
  grid-template-areas: "header header header header header header header"
                       "main main main main main main main"
                       "footer footer footer footer footer footer footer"
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 60px 7fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar box-content box-content";
}

.box-content {
  grid-area: box-content;
  align-items: start;
  align-content: start;
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }


body {
  padding: 0px;
  margin: 0px;
}

div {
  background-color: #f1c40f;
  border: 1px solid white;
}
* { 
  box-sizing: border-box;
}