html - 如何将 block 切换到 CSS 网格的底部？

Question

我正在为我正在做的一个计算器元素而苦苦挣扎。使用我的脚本一切正常，但我不知道如何正确安排我的网格。

归零按钮应该在底部(在按钮 1 和 2 下方)，但我不能将它移到那里。

有人遇到过同样的问题吗？

这是代码笔:https://codepen.io/nico3d911/pen/jZKvdE

html:

<div class="grid-container">
  <button class="grid-item" id="clear" onclick="clearAll()">AC</button>
  <button class="grid-item figure" id="seven" onclick="myFunction(this.id)">7</button>
  <button class="grid-item figure" id="four" onclick="myFunction(this.id)">4</button>
  <button class="grid-item figure" id="one" onclick="myFunction(this.id)">1</button>
  <button class="grid-item figure" id="zero" onclick="myFunction(this.id)">0</button>

  <button class="grid-item" id="clear-entry" onclick="clearEntry(this.id)">CE</button>
  <button class="grid-item figure" id="eight" onclick="myFunction(this.id)">8</button>
  <button class="grid-item figure" id="five" onclick="myFunction(this.id)">5</button>
  <button class="grid-item figure" id="two" onclick="myFunction(this.id)">2</button>

  <button class="grid-item" id="divide" onclick="myOperator(this.id)">/</button>
  <button class="grid-item figure" id="nine" onclick="myFunction(this.id)">9</button>
  <button class="grid-item figure" id="six" onclick="myFunction(this.id)">6</button>
  <button class="grid-item figure" id="three" onclick="myFunction(this.id)">3</button>
  <button class="grid-item" id="dot" onclick="myFunction(this.id)">.</button>

  <button class="grid-item" id="time" onclick="myOperator(this.id)">*</button>
  <button class="grid-item" id="minus" onclick="myOperator(this.id)">-</button>
  <button class="grid-item" id="plus" onclick="myOperator(this.id)">+</button>
  <button class="grid-item figure" id="equal" onclick="result()">=</button>
</div> 

CSS:

.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: 100px 100px 100px 100px 100px;
  padding: 10px;
  grid-template-columns: repeat(6, 100px);
  grid-auto-flow: column;

}
.grid-item {
  background-color: #4CAF50;
  color: white;
  border: 1px solid white;
  font-size: 30px;
  text-align: center;
}

.grid-item:active {
  background-color: #327535;

}

#zero {
  grid-column: 1 / span 2;
}
#equal {
  grid-row: 4 / span 2;
}

谢谢!

Answer 1

将grid-row: 5添加到#zero，如

    #zero {
        grid-column: 1 / span 2;
        grid-row: 5;
    }