JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="title">Title</div>  
  <div class="profile">Profile</div>
  <div class="infobar">Info Bar</div>  
  <div class="maincontent">Main Content
	  <div class="subcontent1">Main1</div>
	  <div class="subcontent2">Main2</div>
  </div>
  <div class="sidebar">Sidebar</div>
</div>

CSS

.wrapper {
  margin: auto;
  width: 80%;
  background-color: #e0e0e0;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 2fr 1fr 4fr;
  grid-template-areas:
  " title profile"
  " infobar infobar "
  " maincontent sidebar ";
  grid-gap: 1em;
}

.space {
    background-color: #eeeeee;
    grid-area: space;
}

.title {
  grid-area: title;
  background-color: red;
}

.profile {
  grid-area: profile;
  background-color: orange;
}

.infobar {
  grid-area: infobar;
  background-color: yellow;
}

.maincontent {
  grid-area: maincontent;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
  "subcontent1 subcontent2"
  "subcontent1 subcontent2";
 
  background-color: green;
}

.subcontent1 {
  grid-area: subcontent1;
  background-color: pink;
  margin: 10px;
}

.subcontent2 {
  grid-area: subcontent2;
  background-color: pink;
  margin: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: aqua;
}



@media screen and (max-width: 900px) {
  .wrapper {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
    "title title sidebar"
    "infobar infobar infobar"
    "profile maincontent maincontent"
    "footer footer ..." /* adjustment */
    ;
  }

  .maincontent{
    display: block;
  }

  .subcontent {
      grid-area: subcontent;
    }
}