<div class="container">
	<div class="header">Header</div>
  <aside class="sidebar">Sidebar </aside>
	<main>Main Content</main>
	<div class="posts">Posts</div>
  <div class="relevant-links">Relevant links</div>
	<footer>Footer</footer>
</div>
.container {
  display: grid;
  grid-template-columns:  100px repeat(2, 1fr);
  grid-template-rows: 50px repeat(4, auto-fill) minmax(50px, 1fr);
  grid-gap: 10px;
}


.header {
  background: lightcoral;
  grid-column: 1/4;
  grid-row: 1/2;
}

.sidebar {
  background: lightseagreen;
  grid-area: sidebar;
  grid-column: 1/2;
  grid-row: 2/4;
}

main {
  background: Plum;
  grid-area: main;
  grid-column: 2/4;
  grid-row: 2/3;
}

.posts {
  background: Goldenrod;
  grid-column: 2/3;
  grid-row: 3/4;
  
}

.relevant-links {
  background: lightgreen;
}

footer {
  background: lightblue;
  grid-column: 1/4;
  grid-row: 4/5;
}


/* OTHER STYLING */

main, footer, .posts, .relevant-links, .header, .sidebar {
	color: #fff;
	font-weight: 800;
	font-size: 1.5rem;
	text-align: center;
	padding: 2rem 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.