CSS-GRID行高问题

Question

我很难适应CSS网格的行高。

这是我目前拥有的： Current result

我想要的是下面的结果，其中1和2是相同的高度。

Result i wish to achieve

是否可以指定行高而没有诸如height: 500px这样的硬编码值

但是要使用分数或其他方式代替硬编码值？

这是我为网格（项目）准备的代码

.o-grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 0.5fr 2fr 1fr 1fr 2fr;
  height: 100%;

  &__header {
    grid-column: 1/5;
    grid-row: 1;
  }

  &__statistics {
    grid-column: 1;
    grid-row: 2;
  }

  &__burndown {
    grid-column: 2 / span 2;
    grid-row: 2 / 5;
  }

  &__fastlane {
    grid-column: 4 / 5;
    grid-row: 2 / -1;
    margin: -20px 0 0 0;
  }

  &__today {
    grid-column: 1;
    grid-row: 3;
  }

  &__beer {
    grid-column: 1;
    grid-row: 4;
  }
}

提前谢谢！