CSS网格坏了

Question

我完全不知道CSS网格上的这种尝试出了什么问题。它的目的是形成一个网格，顶部两行分别填充左区域，标头区域和登录区域。然后是带有左侧区域的下一行，其右侧是填充该行其余部分的标题区域。 取而代之的是，它完全被其顶部的所有文本破坏了，并在上方以较大的空间向右对齐。 我以前曾经工作过网格，但是看不到这到底有什么问题。 任何帮助表示赞赏！

#banner {
  display: grid;
  grid-template-rows: 40px 150px;
  grid-template-columns: 100px 1fr 286px;
  grid-template-areas: "left-area header-area login-area" 
                       "left-area header-area header-area";
}

.left-area {
  grid-area: left-area;
}

.header-area {
  grid-area: header-area;
}

.login-area {
  grid-area: login-area;
}

<div id="banner">

  <div class="left-area">Left</div>
  <div class="header-area">Header</div>
  <div class="login-area">Login</div>
</div>