未定义CSS网格模板区域

Question

您好，我目前正在将布局分为两半，一幅图像为一半，另一幅为简单形式。但是我的表单布局不遵循声明的grid-template-area的流程。我希望每个表单元素都位于彼此直接上方的单独行中。当前，下面的代码具有每个元素在网格上水平流动的功能。

HTML

<div class="wrapper">
  <aside> IMAGE 600PX</aside>
  <section class="header"> h3</section>

  <section="login-user"> 
    <label for="email" class="email">Email</label> 
    <input type="text" class="user-email"></input></section>

  <section="login-pass">
    <label for="password" class="password">
    Password</label>  
    <input type="text" class="user-password"></input>
</section>
<button>submit</button>
</div>

CSS

body, html{
padding:0;
margin:0;
}

.wrapper{
 display:grid;
 max-width:1200px;
 margin: 0 auto;
 grid-template-columns: minmax(300px, 3fr) 20.33%;
 grid-template-rows: repeat(7,1fr);
 grid-template-areas:
    "aside aside header header header"
    "aside aside email email email"
    "aside aside email-input email-input  email-input "
    ". .   password . . "
    ". .    password-input . ."
    ". .    button . . "
}

aside{
grid-area:aside;
    background-color: #20bf6b;
  padding: 20px;
}
.header{
 grid-area:header; 
    background-color: #9C27B0;
  padding: 20px;
}
.login{
 grid-area:login; 
    background-color: #D500F9;
  padding: 20px;
}
.email{
  grid-area:email; 
  background-color: #00695C;
  padding: 20px;
}
.user-email{
  grid-area:email-input;
  background-color: #00695C;
  padding: 20px;
}
.password{
  grid-area:password;
    background-color: #E65100;
  padding: 20px;

}
.user-password{
  grid-area: password-input;
  background-color: #FF8F00;
  padding: 20px;
}
button{
  grid-area: button;
}