CSS Grid - 带有网格间隙的fr的意外行为

Question

我试图用CSS网格创建一个看起来像这样的布局（例如：左边有一个固定宽度和高度的部分，顶部有一个占据最小高度的部分，以及下面的部分占用了所有剩余的空间）：

但是，我得到的是这个（橙色部分底部的空间等于网格行间距）：

我想知道为什么这样计算fr而不是补偿电网间隙？

（在我的项目中，我可以通过向右下角元素添加边距而不是使用网格行间距来解决此问题，但我想知道是否有某些内容我是＆＃39;我对CSS网格的误解）

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;