Диапазон строк во вложенной CSS-сетке

Question

У меня приложение Angular 2, и в одном компоненте у меня есть вложенная сетка.Одна основная сетка с заголовком и каждой строкой - это другая сетка, добавленная * ngFor, и я не знаю, сколько строк я получу.

Если выполнено определенное событие, я хочу, чтобы в строках было несколько блоков вместо строк.

CSS:

.grid {
  display: grid;
  width: 80px;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 20px;
} 
.h-item1 {
    grid-column: 1;
    background-color: red;
  }
.h-item2 { 
    grid-column: 2;
    grid-row: 1;
    background-color: pink;
  }
.h-item3 {
    grid-column: 3;
    grid-row: 1;
    background-color: violet;
  } 

.sub-grid {
    display: grid;
    grid-column: 1 / span 3;
    height: 30px;
    width: 80px;
    grid-template-areas: 'item1 item2 item3';
    grid-template-columns: 100px 100px 100px;

  }
  .item1 {
    grid-area: item1;
    background-color: lime;
  }

  .item2 {
    grid-area: item2;
    background-color: yellow;
  }

  .item3 {
    grid-area: item3;
    background-color: blue; 
  } 

HTML:

<div class="grid">
  <div class="h-item1">1</div>
  <div class="h-item2">2</div>
  <div class="h-item3">3</div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div> 
</div>

Кодовая ручка того, как выглядит сетка, находится здесь:

https://codepen.io/anon/pen/dgKwxr

Мне бы хотелось, чтобы желтый столбец охватывал первые две строки, а затем, например, от третьего до конца.Есть ли способ сделать это, используя этот вид использования сетки?

В конце сетка должна выглядеть так:

header1 header2 header2
sub1    sub2    sub3
sub1            sub3
sub1    sub2    sub3 
sub1            sub3 
sub1            sub3
sub1            sub3

, где sub2 охватываются.