如何使用grid布局编写一个计算器

如何使用grid布局编写一个计算器

话不多说 看效果

// CSS
.wrapper{
       width:450px;
       background: #f3f3f3;
       text-align:center;
       display: grid;
       grid-template-columns: 90px 90px 90px 90px 90px;
       grid-template-rows: 50px 50px 50px ;
   }
   .input{
    grid-column: 1 / 7;
    text-align: left;
    margin: 5px;
    color:black;
    line-height: 40px;
       background:white;
    border: 1;
   }
   .item2{
    grid-column: 1;
    background-color: blanchedalmond;
    margin: 3px;
    line-height: 40px;
   }
   .item3{
    grid-column: 2;
    background-color: blanchedalmond;
    margin: 3px;
    line-height: 40px;
   }
   .item4{
    grid-column: 3;
    background-color: blanchedalmond;
    margin: 3px;
    line-height: 40px;
   }
   .item5{
    grid-column: 4;
    background-color: blanchedalmond;
    margin: 3px;
    line-height: 40px;
   }
   .item6{
    grid-column: 5;
    background-color: blanchedalmond;
    margin: 3px;
    line-height: 40px;
   }
   .item7{
    grid-column: 5;
    grid-row: 3 / 6;
    background-color: blanchedalmond;
    margin: 3px;
    line-height: 150px;
   }
   .item8{
    grid-column: 1/3;
    background-color: blanchedalmond;
    margin: 3px;
    line-height: 40px;
   }
   .item9{
    grid-column: 3;
    background-color: blanchedalmond;
    margin: 3px;
    line-height: 40px;
   }
   .item10{
    grid-column: 4;
    background-color: blanchedalmond;
    margin: 3px;
    line-height: 40px;
   }

// HTML
<div class="wrapper" id="rec" onclick="rec()">
          <div class="input" id="display">0</div>
    <div class="item2">7</div>
    <div class="item3">8</div>
    <div class="item4">9</div>
    <div class="item5">+</div>
    <div class="item6" id="reset">归零</div>
    <div class="item2">4</div>
    <div class="item3">5</div>
    <div class="item4">6</div>
    <div class="item5">-</div>
    <div class="item7" id="sum" onclick="sum()">=</div>
    <div class="item2">1</div>
    <div class="item3">2</div>
    <div class="item4">3</div>
    <div class="item5">*</div>
    <div class="item8">0</div>
    <div class="item9">.</div>
    <div class="item10">/</div>
  </div>

// JavaScript
var results="";
   function rec(){
    if (event.srcElement.innerText=="=") {
       return;
    }
     if (event.srcElement.innerText=="归零") {
       results="";
       display.innerText="0";
       return;
    }
    results+=event.srcElement.innerText;
    display.innerText=results;
   }
   function sum(){
    calresults=eval(results);
    display.innerText=calresults;
   }