Не работает grid-template-areas?

Question

[Loatck]

<div class="calc">
     <div class="calc-scrren">
    <p>0</p>
    </div>
    <div calss="buttons">
        <div class="btn ac bg-grey">ac</div>
        <div class="btn plus-minus bg-grey">+/-</div>
        <div class="btn percent bg-grey">%</div>
        <div class="btn division bg-orange">/</div>
        
        <div class="btn seven">7</div>
        <div class="btn eight">8</div>
        <div class="btn nine">9</div>
        <div class="btn multiply bg-orange">X</div>

        <div class="btn four ">4</div>
        <div class="btn five ">5</div>
        <div class="btn six ">6</div>
        <div class="btn minus bg-orange">-</div>

        <div class="btn one ">1</div>
        <div class="btn two ">2</div>
        <div class="btn three ">3</div>
        <div class="btn plus bg-orange">+</div>

        <div class="btn zero ">0</div>
        <div class="btn dot ">.</div>
        <div class="btn equal bg-orange">=</div>
    </div>

.buttons {
    display: grid;
    grid-template-areas:
    "ac plus-minus percent division"
    "seven eight nine multi"
    "four five six minus"
    "one two three plus"
    "zero zero dot equal";
}

Answer 1

[Вадим]

В grid-template-areas указываются не классы элементов, а значения grid-area, которое задано элементам.

Например:

.ac {
  grid-area: ac
}

...

.buttons {
    display: grid;
    grid-template-areas:
    "ac plus-minus percent division"
    "seven eight nine multi"
    "four five six minus"
    "one two three plus"
    "zero zero dot equal";
}

Ну и сетку тоже нужно определить. А то грид указали, а какие колонки\строки не указали.