CSS网格：不正确的定位

Question

我尝试使用CSS网格定位元素。 我希望这样的徽标在顶部，空白，timePickr和按钮以及空白：

print(e);//as in above
print(e.code); //ERROR_EMAIL_ALREADY_IN_USE
print(e.message);//The email address is already in use by another account.
print(e.details);//null

但是使用下面的代码，我没有那个。

  .    .      logo logo   .      .
  .    .       .    .     .      .
  . timePick   .    .   buttonOK .
  .    .       .    .     .      .

.wrapper{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 10vh 15vh 60vh 15vh;
  grid-gap: 10px;
  grid-template-areas:
  ". . logo logo . ."
  ". . . . . ."
  ". timePick . . buttonOK ."
  ". . . . . .";
  font-family: Helvetica;
  font-weight: bold
}

.logo{
  grid-area: logo;
}

.timePick{
  grid-area: timePick;
}

.buttonOK{
  grid-area: buttonOK;
}

.imLogo{
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

您知道我的CSS有什么问题吗？

---

编辑

使用代码段，我具有预期的行为。但是在React中，我在顶部有徽标，在右下角有timePick和Button。我的代码与React exept class-> className完全相同。

您知道如何纠正它吗？