<div class="container">
  <div class="logo">LOGO</div>
  <div class="menu">MENU</div>
  <div class="post">POST</div>
  <div class="sidebar">SIDEBAR</div>
  <div class="footer">FOOTER</div>
</div>
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 50px 150px 50px;
  grid-template-areas: 
    "logo . menu menu"
    "post post post sidebar"
    "footer footer footer footer";
  * {
    color: white;
    text-align: center;
  }
  .logo {
    background: pink;
    grid-area: logo;
  }
  .menu {
    background: coral;
    grid-area: menu;
  }
  .post {
    background: #2196F3;
    grid-area: post;
   }
  .sidebar {
    background: orange;
    grid-area: sidebar;
  }
  .footer {
    background: navy;
    grid-area: footer;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.