<div class="support-grid"></div>

<section class="grid-1">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</section>

body {
  background: #f5f7f8;
}

.grid-1 {
  display: grid;
  grid: "header   header   header" 80px 
        "main     main     sidebar" 180px
        "footer   footer   footer" 80px
        / 1fr 1fr 1fr;
}

.grid-13 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px 180px 80px;
  grid-template-areas: "header   header   header"
                       "main     main     sidebar"
                       "footer   footer   footer";
}


/* items */

.grid-1 div {
  color: white;
  font-size: 20px;
  padding: 20px;
  }

/* specific item styles */

.item-1 {
  background: #b03532;
  grid-area: header;
}
.item-2 {
  background: #33a8a5;
  grid-area: main;
}
.item-3 {
  background: #30997a;
  grid-area: sidebar;
}
.item-4 {
  background: #6a478f;
  grid-area: footer;
}