How do I move elements within their grid?

const output = document.getElementById("output");
let reset = document.querySelector(".reset");


function resetOutput() {
  output.innerHTML = "0";
}

* {
  background-color: silver;
}
h1 {
  text-align: center;  
}

#calc_buttons {
  display: grid;
  align-content: center;
  justify-content: center;
  min-height: 50vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(6);
}

#calc_buttons > button {
  cursor: pointer;
  font-size: 1.5rem;
  border: 1px solid white;
  outline: none;
  background-color: #6699cc;
  width: 100px;
  height: 80px;
}

#calc_buttons > button:hover {
  background-color: rgba(255, 255, 255, .9);
}

<h1> My First JavaScript Calculator </h2><div id="calculator"><div id="calc_display"><span id="output"></span></div><div id="calc_buttons"><button onclick="resetOutput()" id="num" class="reset" data-equals="reset">C</button><button id="num" class="seven">7</button><button id="num" class="eight">8</button><button id="num" class="nine">9</button><button id="num" class="four">4</button><button id="num" class="five">5</button><button id="num" class="six">6</button><button id="num" class="three">3</button><button id="num" class="two">2</button><button id="num" class="one">1</button><button id="num" class="zero">0</button><button id="num" class="decimal" data-action="decimal">.</button><button id="num" class="equals" data-equals="equal">=</button><button id="num" class="minus" data-action="minus">-</button><button id="num" class="plus" data-action="plus">+</button><button id="num" class="divide" data-action="divide">/</button><button id="num" class="multiply" data-action="multiply">*</button></div>