<h1>Using Named Lines with <code>span</code></h1>
<div class="container">
  <div class="item header">Header</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item advert">Advert</div>
  <div class="item content">Content</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: [one-eighty] 180px [one-eighty] 180px [one-eighty] 180px;
  grid-template-rows: [head-row] auto [content-row] auto [content-row] auto [content-row] auto [footer-row] auto;
}

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

.header {
  background: #0d9;
}

.sidebar {
  background: #d90;
}

.advert {
  background: #09d;
}

.content {
  background: #9d0;
}

.footer {
  background: #90d;
}

.header {
  grid-column: one-eighty 1 / one-eighty 4;
  grid-row: head-row / content-row 1;
}

.sidebar {
  grid-column: one-eighty 1 / one-eighty 2;
  grid-row: content-row 1 / content-row 2;
}

.advert {
  grid-column: one-eighty 1 / one-eighty 2;
  grid-row: content-row 2 / content-row 3;
}

.content {
  grid-column: one-eighty 2 / one-eighty 4;
  grid-row: content-row 1 / span content-row 2;
}

.footer {
  grid-column: one-eighty 1 / span one-eighty 3;
  grid-row: content-row 3 / footer-row;
}