Попытка использовать css-grid, но не все элементы, кажется, идут в правильном месте

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