Row span without affecting other rows

Question

I'm trying to figure out how to display a div over multiple rows without affecting the height of others div elements using the same rows.

Here is an example:

#wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
}

#navigation {
  grid-column-start: 1;
  grid-column-end: 13;
  background-color: #CCC;
  grid-row: 1;
}

#hero {
  grid-column-start: 1;
  grid-column-end: 13;
  background-color: #BBB;
  grid-row: 2;
}

#left1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row: 3;
  background-color: #AAA;
}

#left2 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row: 4;
  background-color: #DDD;
}

#right {
  grid-column-start: 4;
  grid-column-end: 13;
  grid-row: 3/5;
  background-color: #EEE;
}

<div id="wrapper">
  <div id="navigation">NAVIGATION</div>
  <div id="hero">HERO IMAGE</div>
  <div id="left1">Left1</div>
  <div id="left2">Left2</div>
  <div id="right">Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </div>
</div>

The div called #right is always going to be much longer than #left1 and #left2. If I put them aside, #right will increase the height of #left1 and #left2 and I would like to avoid that.

I could fix the problem by defining row heights in the grid definition but I'm never 100% sure how big #left1 and #left2 will be.

Example:

grid-template-rows: 50px 400px 300px 300px auto;

That works when dimensions are not exceeding those values but what I need is a "fit to content" approach for all div elements without creating dependencies between them.

Is that achievable with grid?

Thanks