有些事如何做: Grid-Template-Areas

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>

https://stackoverflow.com/questions/66729030/grid-template-areas-invalid-property-value March 21, 2021 at 01:06PM

有些事如何做

2021年3月20日星期六

Grid-Template-Areas - Invalid Property Value

没有评论:

发表评论