CSS grid broken

Question

I'm completely at a loss as to what is wrong with this attempt at a CSS grid. It is meant to result in a grid with the top row of two filled with the left-area, then the header-area, then the login area. Then the next row with the left-area and on its right the header area filling the rest of the row. Instead it is totally broken with all the text on top of itself and aligned to the right with a large space above. I have had grids working before and cannot see what on earth is wrong with this one. Any help appreciated!

#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>