Grid Template Areas

Grid Template Areas by Wes Bos

by lborgman

HTML

<div class="container">
  <div class="item item1">
    <p>Iten #1</p>
  </div>
  <div class="item item2">
    <p>item 2</p>
    <p>Lorem ipsum d</p>
  </div>
  <div class="item item3">
    <p>Item 3</p>
  </div>
  <div class="item footer">
    <p>footer</p>
  </div>
</div>

CSS

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 5fr 1fr;
  grid-template-rows: 30px 30px 50px;
  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"
  }
}
.item {
  background: yellow;
}