<h1>Using Named Grid Areas</h1>
<div class="container">
  <div class="item header">Header</div>
  <div class="item content">Content</div>
  <div class="item advert">Advert</div>
  <div class="item footer">Footer</div>
</div>

body {
  margin: 10px;
  font-family: 'Abel';
  text-align: center;
  width: 580px;
}

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 180px 180px 180px;
  grid-template-areas: "header  header   header" 
                       "content content  advert" 
                       "content content  ......" 
                       "footer  footer   footer";
}

.item {
  color: white;
  padding: 1.5em 0;
  font-size: 2em;
}

.header {
  background: #0d9;
}

.content {
  background: #9d0;
}

.advert {
  background: #d90;
}

.footer {
  background: #90d;
}

.header {
  grid-area: header;
}

.advert {
  grid-area: advert;
}

.content {
  grid-area: content;
  height: 180px;
}

.footer {
  grid-area: footer;
}