<div class="container">
  <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: [first] 100px [second] 100px  [third] 100px [fourth] 100px [last] 0;
  grid-template-rows: [header] 50px [body] 300px [footer] 50px [end] 0;
  * {
    color: white;
    text-align: center;
  }
  .menu {
    background: coral;
    grid-column: first / last;
    grid-row: header / body;
  }
  .post {
    background: #2196F3;
    grid-column: first / fourth;
    grid-row: body / footer;
   }
  .sidebar {
    background: orange;
    grid-column: fourth / last;
    grid-row: body / footer;
  }
  .footer {
    background: navy;
    grid-column: first / last;
    grid-row: footer / end;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.