Menu
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>
340
There are a few rules when creating CSS Grid layouts using grid-template-areas.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
