CSS Grid - неожиданное поведение fr с разрывом сетки

Question

Я пытаюсь создать макет с CSS-сеткой, который выглядит следующим образом (то есть: раздел слева, который имеет фиксированную ширину и высоту, раздел вверху, который занимает минимально возможную высоту, и разделпод тем, что занимает все оставшееся пространство):

Однако, что я получаю, это (где пространство в нижней частиоранжевая секция равна промежутку между строками сетки):

Мне интересно, почему франк вычисляется таким образом, а не для компенсацииразрыв сетки?

(В моем проекте я могу исправить эту проблему, добавив поле в нижний правый элемент вместо использования сетки-гэпа-пробела, но я хотел бы знать, есть ли что-то, что янедоразумение о сетке CSS)

span {
  display: inline-block;
}

.grid {
  border: 1px solid black;
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: auto 1fr;
  grid-row-gap: 1rem;
}

.left {
  background: orange;
  height: 120px;
  width: 120px;
  grid-row: 1/span 2;
}

.right-top {
  background: yellow;
  height: 20px;
  width: 300px;
}

.right-bottom {
  background: blue;
}

<div class="grid">
  <span class="left"></span>
  <span class="right-top"></span>
  <span class="right-bottom"></span>
</div>