Grid Template Areas

Grid Template Areas by Wes Bos

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/wesbos/css-grid/master/assets/style.css">
<div class="container">
  <div class="item item1">
    <p>I'm Sidebar #1</p>
  </div>
  <div class="item item2">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.</p>
    <p>Lorem ipsum d</p>
  </div>
  <div class="item item3">
    <p>I'm Sidebar #2</p>
  </div>
  <div class="item footer">
    <p>I'm the footer</p>
  </div>
</div>

CSS

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 10fr 1fr;
  grid-template-rows: 150px 150px 100px;
  grid-template-areas:
    "sidebar-1  content   sidebar-2"
    "sidebar-1  content   sidebar-2"
    "footer     footer    footer"
}
.footer {
  grid-area: footer;
}
.item1 {
  grid-area: sidebar-1;
}
.item2 {
  grid-area: content;
}
.item3 {
  grid-area: sidebar-2;
}
@media (max-width: 700px) {
  .container {
    grid-template-areas:
      "content    content     content"
      "sidebar-1  sidebar-1   sidebar-2"
      "footer     footer      footer"
  }
}