12

I have tried to search Stack overflow, mozilla documentation, and CSS tricks to find out why I keep getting an invalid property value for my grid-template-areas and cannot figure it out. Could someone please point out why I am getting this error message and what I am doing wrong?

I am trying to create a calculator. In order to do so I am attempting to create grid cells to input the operators and key numbers into them.

Thanks in advance.

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}


#gridContainer {
    border: 1px solid black;
    display: grid;
    grid-template-columns: 4rem 4rem 4rem 4rem;
    grid-template-rows: 6rem 6rem 6rem 6rem 6rem 6rem;
    grid-template-areas: 
    "s s s s"
    "o o o o"
    "n n n o"
    "n n n o"
    "n n n o"
    "z z d c";
}
<html>
<body>
    <div id="gridContainer">
        <div id="screen"></div>
        <button id="clear" class="clear" type="button" value="clear" >AC</button>
        <button id="negativeNumber" class="negative" type="button" value="signs">+ / -</button>
        <button id="percent" class="percentage" type="button" value="percent">%</button>
        <button id="divide" class="operator" type="button" value="/">/</button>
        <button id="seven" class="number" type="button" value="7">7</button>
        <button id="eight" class="number" type="button" value="8">8</button>
        <button id="nine" class="number" type="button" value="9">9</button>
        <button id="multiply" class="operator" type="button" value="*">*</button>
        <button id="four" class="number" type="button" value="4">4</button>
        <button id="five" class="number" type="button" value="5">5</button>
        <button id="six" class="number" type="button" value="6">6</button>
        <button id="subtract" class="operator" type="button" value="-">-</button>
        <button id="one" class="number" type="button" value="1">1</button>
        <button id="two" class="number" type="button" value="2">2</button>
        <button id="three" class="number" type="button" value="3">3</button>
        <button id="addition" class="operator" type="button" value="+">+</button>
        <button id="zero" class="number" type="button" value="0">0</button>
        <button id="decimal" class="number" type="button" value=".">.</button>
        <button id="equals" class="equal" type="button" value="=">=</button>
    </div>
</body>
</html>
Tanner Dolby
  • 4,253
  • 3
  • 10
  • 21
coe
  • 281
  • 1
  • 2
  • 12

1 Answers1

20

There are a few rules when creating CSS Grid layouts using grid-template-areas.

  1. You must describe a complete grid, i.e. every cell on your grid must be filled.
  2. You can only define each area once, meaning that you can’t use this property to copy content into two places on the grid.
  3. You can’t create a non-rectangular area, else the declaration is invalid.

Breaking these rules will result in your value being invalid and therefore the layout not working.

The reason your grid-template-areas declaration is invalid, was because it violated rule #2. You try to define each grid-area more than once and copy content into two places on the grid. You've duplicated the area o in the third, fourth and fifth rows. Once you fix that the property value becomes valid. Feel free to change up the area names if you need but always keep in mind the above rules when working with grid-template-areas.

I assume s stands for "screen", o for "operation", n for "number" and so on. If you define the second row to have every area be o like o o o o then you can't use n n n o in the next row because your violating rule #2 by defining a grid-area more than once and copying content into two places within the grid. I updated your code so the grid-template-areas declaration is valid.

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}


#gridContainer {
    border: 1px solid black;
    display: grid;
    grid-template-columns: 4rem 4rem 4rem 4rem;
    grid-template-rows: 6rem 6rem 6rem 6rem 6rem 6rem;
    grid-template-areas: 
                        "s s s s"
                        "O O O O"
                        "o n n n"
                        "o n n n"
                        "o n n n"
                        "z z d c";
}
<html>
<body>
    <div id="gridContainer">
        <div id="screen"></div>
        <button id="clear" class="clear" type="button" value="clear">AC</button>
        <button id="negativeNumber" class="negative" type="button" value="signs">+ / -</button>
        <button id="percent" class="percentage" type="button" value="percent">%</button>
        <button id="divide" class="operator" type="button" value="/">/</button>
        <button id="seven" class="number" type="button" value="7">7</button>
        <button id="eight" class="number" type="button" value="8">8</button>
        <button id="nine" class="number" type="button" value="9">9</button>
        <button id="multiply" class="operator" type="button" value="*">*</button>
        <button id="four" class="number" type="button" value="4">4</button>
        <button id="five" class="number" type="button" value="5">5</button>
        <button id="six" class="number" type="button" value="6">6</button>
        <button id="subtract" class="operator" type="button" value="-">-</button>
        <button id="one" class="number" type="button" value="1">1</button>
        <button id="two" class="number" type="button" value="2">2</button>
        <button id="three" class="number" type="button" value="3">3</button>
        <button id="addition" class="operator" type="button" value="+">+</button>
        <button id="zero" class="number" type="button" value="0">0</button>
        <button id="decimal" class="number" type="button" value=".">.</button>
        <button id="equals" class="equal" type="button" value="=">=</button>
    </div>
</body>
</html>
Tanner Dolby
  • 4,253
  • 3
  • 10
  • 21
  • 2
    In other words, despite temptation, you can't have a non-rectangular grid area. Just fell into that trap myself. I guess if you were sure you could have overlapping areas instead. – Anita Graham Sep 05 '21 at 04:14
  • 1
    For anyone setting only rectangle areas and still says invalid property for `grid-area`, be sure to check that you didn't add any quotes to the value. So `grid-area: heading;` will be ok, but `grid-area: "heading";` will give you invalid property. – zoltankundi Jul 10 '22 at 19:16