尝试使用CSS网格，但并非所有元素似乎都在正确的位置

Question

我具有格式正确的网格区域模板，但是由于某些原因，当我添加一个元素并为其分配网格区域时，它会进入该列中的下一个可用空间。例如：应该是中间列的底部行，但是在中间列上显示了一个远离私有元素的空间。 （代码中显示的示例）此外，间距不起作用，例如：3fr与1fr的大小相同。 （这是在代码笔中） 在评论中解决了此问题

新问题：数字包围着一切，为什么？

body {
  background-color: rgb(90, 250, 190);
  text-align: center;
  font-family: 'Alegreya', serif;
  min-width: 320px;
}

.container {
  min-height: 500px;
  width: 98%;
  margin: 10px;
  display: grid;
  background: rgb(255, 255, 255);
  grid-template-columns: 30px 3fr 2fr;
  grid-template-rows: 0.5fr 1fr 1fr 1fr 3fr 3fr 1fr 3fr 2fr;
  grid-template-areas: "description description description" "1 name nameinput"
 "2 email emailinput" 
"3 age ageinput"
 "4 redblueoryellow redblueoryellowinput"
 "5 mixedwith mixedwithinput"
 "6 lighterordarkerdropdown lighterordarkerdropdowninput" 
"7 radiobuttons radiobuttonsinput" 
"8 questionsorcomments questionsorcommentsinput"
}

.description {
  grid-area: description;
  font-size: 30px;
}

.\31 {
  grid-area: \31;
}

.\32 {
  grid-area: \32;
}

.\33 {
  grid-area: \33;
}

.\34 {
  grid-area: \34;
}

.\35 {
  grid-area: \35;
}

.\36 {
  grid-area: \36;
}

.\37 {
  grid-area: \37;
}

.\38 {
  grid-area: \38;
}

.name {
  grid-area: name;
}

.email {
  grid-area: email;
}

.questionsorcomments {
  grid-area: questionsorcomments;
}

<div class="container">
  <p id="description" class="description">
    What is your favorite color?
  </p>
    <p class="1">1.</p>
    <p class="2">2.</p>
    <p class="3">3.</p>
    <p class="4">4.</p>
    <p class="5">5.</p>
    <p class="6">6.</p>
    <p class="7">7.</p>
    <p class="8">8.</p>
    <p class="name">What is your name?</p>
    <p class="email">What is your email?</p>
    <p class="questionsorcomments"> Any questions or comments?</p>
</div>

数字应该在侧面。如果您想链接到完整的密码笔，则这里是：https://codepen.io/Homburg_Molly/pen/arbzeN