网格模板区域未将元素放置在预期位置

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

这是不需要的结果：

第 5 列和 3 行来自哪里？老实说，我在这里迷路了。

Answer 1

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

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

为网格区域写下数字名称而不是数字本身

网格模板区域未将元素放置在预期位置

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

html

css

sass

css-grid