Search code examples
htmlcsssasscss-grid

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

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: enter image description here

Where did that 5th column and the 3 rows come from? I am honestly lost here.

Solution

  • @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