Aligning grid rows to inner grid rows

Question

I have design where I need to place grid inside another grid. Inner grid spans 3 rows and have 3 rows itself with at least 3 columns (could be more). I want to align yellow inner rows to parent grid's rows corresponding so parent's grid-column: 1, grid-row: 2/5 would be the same height as yellow rows.

I think grid-template-rows: subgrid would work, but it is not fully supported yet. Is the only solution to use single grid with 4 columns and span columns where 4 columns are not required?

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid>div {
  border: 1px solid black;
  background-color: blue;
}

.subgrid {
  align-items: center;
  grid-row: span 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.subgrid>div:nth-child(-n+3) {
  height: 20px;
  border: 1px solid gray;
  background-color: yellow;
}

.subgrid>div:nth-child(n+4):nth-child(-n+6) {
  height: 50px;
  border: 1px solid gray;
  background-color: yellow;
}

.subgrid>div:nth-child(n+7):nth-child(-n+9) {
  height: 20px;
  border: 1px solid gray;
  background-color: yellow;
}

<div class="grid">
  <div>First Row First Col</div>
  <div>First Row Second Col</div>
  <div>Empty Col</div>
  <div class="subgrid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>Third Row First Col</div>
  <div>Fourth Row First Col</div>
  <div>Fifth Row First Col</div>
  <div>Fifth Row Second Col</div>
</div>