<div class="grid">
  <nav>
    <h2>Navigation</h2>
  </nav>
  <main>
    <h2> Main content</h2>
  </main>
  <aside>
    <h2>Sidebar</h2>
  </aside>
</div>
.grid {
  padding: 15px;
  
  display: grid;
  grid-gap: 30px;
  grid-template-areas: "nav" "main" "aside";
  grid-template-rows: 1fr 2fr;
}

@media (min-width: 512px) {
  .grid {
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "nav nav" "main aside";
  }
}

.grid > * {
  border-radius: 15px;
}

nav {
  background-color: green;
  grid-area: nav;
}

main {
  background-color: red;
  grid-area: main;
}

aside {
  background-color: blue;
  grid-area: aside;
}

h2 {
  padding: 15px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.