Grid only
<div class="grid-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>

<div class="flex-container">
  Flex only
	<div class="header">Header</div>
  <div class="flex-content">
    <aside class="sidebar">Sidebar </aside>
    <div class="nested-content">
      <main>Main Content</main>
      <div class="even-more-nesten-content">
        <div class="posts">Posts</div>
        <div class="relevant-links">Relevant links</div>
      </div>
    </div>
  </div>
	<footer>Footer</footer>
</div>
/* ----- PURE GRID ----- */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(50px, 1fr));
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "sidebar posts links"
    "footer footer footer";
  grid-gap: 5px;
}
.container > * {
  padding: 5px;

}

.header {
  background: lightcoral;
  grid-area: header;
}

.sidebar {
  background: lightseagreen;
  grid-area: sidebar;
}

main {
  background: Plum;
  grid-area: main;
}

.posts {
  background: Goldenrod;
  grid-area: posts;
  width: 100%
}

.relevant-links {
  background: lightgreen;
  grid-area: links;
  width: 100%
}

footer {
  background: lightblue;
  grid-area: footer;
}

/* ----- PURE FLEX ----- */

.flex-container {
  display:flex;
  flex-direction: column;
}

.flex-content {
  display:flex;
  margin: 5px 0 5px 0;
}

.nested-content{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 0 5px;
}

.even-more-nesten-content {
  display:flex;
  margin: 5px 0 0 0;
}




/* 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.