网格模板-不将元素放置在预期位置的区域

Question

我已经检查过好几次了，我发誓我每一行都有相同数量的列。我还检查了每个网格-是否对应于它的适当位置，但我仍然得到了一些非常奇怪的额外单元格。

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>

这是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;
    }
}

这是不想要的结果：

​

第五列和第三列是从哪里来的？我真的迷路了。

Answer 1

@JHeth解决了我的问题。以下是答案：

可能是因为在只接受字符串的网格模板区域中使用数字作为网格区域名称。试着把1-7换成1-7，看看它是否有效。

.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;
    }

写下数字的名称，而不是网格区域的数字本身。