grid-template-area not placing elements in the expected positions - html

Question

I've checked multiple times I swear I have the same amount of columns in every row. I've also check that every grid-are corresponds to its due position but I still get some pretty weird extra cells.
html:
<main>
<div class="calculator">
<div class="calculator-screen">0</div>
<div class="calculator-delete">C</div>
<div class="calculator-percent">%</div>
<div class="calculator-negative">+/-</div>
<div class="calculator-division">/</div>
<div class="calculator-7">7</div>
<div class="calculator-8">8</div>
<div class="calculator-9">9</div>
<div class="calculator-multiply">*</div>
<div class="calculator-4">4</div>
<div class="calculator-5">5</div>
<div class="calculator-6">6</div>
<div class="calculator-subtract">-</div>
<div class="calculator-1">1</div>
<div class="calculator-2">2</div>
<div class="calculator-3">3</div>
<div class="calculator-add">+</div>
<div class="calculator-dot">.</div>
<div class="calculator-zero">0</div>
<div class="calculator-squareRoot">&#8730</div>
<div class="calculator-equals">=</div>
</div>
</main>
here's the scss:
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
font-size: 62.5%;
}
body{
font-family: 'Roboto';
font-size: 1.6rem;
}
main{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator{
width: 50%;
min-height: 75%;
display: grid;
grid-template-areas:
"screen screen screen screeen"
"delete percent negative division"
"7 8 9 multiply"
"4 5 6 subtract"
"1 2 3 add"
"dot zero squareRoot equals";
text-align: center;
outline: 1.5px solid black;
& > *{
outline: 1.5px solid black;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
}
&-screen{
grid-area: screen;
justify-content: end;
align-items: flex-end;
padding: 0px 20px 20px 0px;
font-size: 3rem;
}
&-delete{
grid-area: delete;
}
&-percent{
grid-area: percent;
}
&-negative{
grid-area: negative;
}
&-division{
grid-area: division;
}
&-7{
grid-area: 7;
}
&-8{
grid-area: 8;
}
&-9{
grid-area: 9;
}
&-multiply{
grid-area: multiply;
}
&-4{
grid-area: 4;
}
&-5{
grid-area: 5;
}
&-6{
grid-area: 6;
}
&-subtract{
grid-area: subtract;
}
&-1{
grid-area: 1;
}
&-2{
grid-area: 2;
}
&-3{
grid-area: 3;
}
&-add{
grid-area: add;
}
&-dot{
grid-area: dot;
}
&-zero{
grid-area: zero;
}
&-squareRoot{
grid-area: squareRoot;
}
&-equals{
grid-area: equals;
}
}
Here's the unwanted result:
Where did that 5th column and the 3 rows come from? I am honestly lost here.

Answer 1

#JHeth solved my question. Here's the answer:
Might be because you're using numbers as grid-area names in grid-template-areas which only accept a string. Try switching 1-7 to one-seven and see if it works.
.calculator{
width: 50%;
min-height: 75%;
display: grid;
grid-template-areas:
"screen screen screen screen"
"delete percent negative division"
"seven eight nine multiply"
"four five six subtract"
"one two three add"
"dot zero squareRoot equals";
text-align: center;
outline: 1.5px solid black;
& > *{
outline: 1.5px solid black;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
}
&-screen{
grid-area: screen;
justify-content: end;
align-items: flex-end;
padding: 0px 20px 20px 0px;
font-size: 3rem;
}
&-delete{
grid-area: delete;
}
&-percent{
grid-area: percent;
}
&-negative{
grid-area: negative;
}
&-division{
grid-area: division;
}
&-7{
grid-area: seven;
}
&-8{
grid-area: eight;
}
&-9{
grid-area: nine;
}
&-multiply{
grid-area: multiply;
}
&-4{
grid-area: four;
}
&-5{
grid-area: five;
}
&-6{
grid-area: six;
}
&-subtract{
grid-area: subtract;
}
&-1{
grid-area: one;
}
&-2{
grid-area: two;
}
&-3{
grid-area: three;
}
&-add{
grid-area: add;
}
&-dot{
grid-area: dot;
}
&-zero{
grid-area: zero;
}
&-squareRoot{
grid-area: squareRoot;
}
&-equals{
grid-area: equals;
}
Wrote down the name of the numbers instead of the numbers themselves for the grid-areas