<div class="grid">
  <h1 class="header">Header</h1>
  <h2 class="subheader">I've used a div with a hidden pseudo-element to prevent the CSS Grid auto-placement algorithm from fulling in the available cells to the right of this subheader<br/>Bit of a nasty hack, but it works. Check out the section of this CSS-Tricks article: <br/><a href="https://css-tricks.com/things-ive-learned-css-grid-layout/#article-header-id-11" target="_blank">https=://css-tricks.com/things-ive-learned-css-grid-layout/#article-header-id-11</a></h2>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

.grid {
  width: 100%;
  display: grid;
  /* 2 colums left @ 164px wide - 1 column middle @ 1fr wide - 2 colums right @ 164px wide*/
  grid-template-columns: 164px 164px 1fr 164px 164px;
  /* set 4 rows, each 164px height */
  grid-template-rows: auto auto repeat(4, 164px);
  /* set vertical and horizontal gutters at 20px*/
  grid-gap: 20px;
}

.grid div {
  color: white;
  border: 1px dotted black;
  background: rgba(0, 0, 0, 0.5);
}

.grid div:nth-child(odd) {
  background: rgba(0, 0, 0, 0.2);
}

.header {
  grid-column: 1 / 6;
  background: red !important;
  margin: 0;
  color: white;
  text-align: center;
  grid-row-gap: 5px;
}

.subheader {
  grid-column: 3 / 4;
  background: yellow !important;
  margin: 0;
  color: black;
  text-align: center;
  font-size: 1.2em;
}

.placeholder {
  background: transparent !important;
  border: none !important;
}

.placeholder::before {
  content: '';
}