CSS Grid basics

CSS Grid up and running. It shows basic usage example of grid-template-areas and grid-template-columns.

HTML

<div class="container">
  <header>Header</header>
  <aside class="aside-1">Sidebar 1</aside>
  <section>Content</section>
  <aside class="aside-2">Sidebar 2</aside>
  <footer>Footer</footer>
</div>

CSS

.container {
  height: 100vh;
  display: grid;
  grid-gap: 2px;
  grid-template-areas:
    "header"
    "section"
    "aside-1"
    "aside-2"
    "footer"
}

@media (min-width: 700px) {
  .container {
    grid-template-areas:
      "header header header"
      "aside-1 section aside-2"
      "footer footer footer";
    grid-template-columns: 100px auto 100px;
    grid-template-rows: auto;
  }
}

.container{
  background: #bada55;
}

header {
  background: red;
  grid-area: header;
}

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

.aside-1 {
  grid-area: aside-1;
}

.aside-2 {
  grid-area: aside-2;
}

section {
  grid-area: section;
}