Question

如何使以下元素不爬入空间网格列：1/3; ？

.fild_buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 10px;
}

.btn_number {
  display: block;
  height: 72.5px;
  border: 1px solid #000;
  cursor: pointer;
  font-size: 32px;
}

.btn_reset {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

<div class="fild_buttons">
  <button class="btn_number  btn_reset" type="button">RESET</button>
  <button class="btn_number  btn_7" type="button">7</button>
  <button class="btn_number  btn_8" type="button">8</button>
  <button class="btn_number  btn_9" type="button">9</button>
  <button class="btn_number  btn_divide " type="button">/</button>
  <button class="btn_number  btn_4" type="button">4</button>
  <button class="btn_number  btn_5" type="button">5</button>
  <button class="btn_number  btn_6" type="button">6</button>
  <button class="btn_number  btn_multiply" type="button">X</button>
  <button class="btn_number  btn_1" type="button">1</button>
  <button class="btn_number  btn_2" type="button">2</button>
  <button class="btn_number  btn_3" type="button">3</button>
  <button class="btn_number  btn_substract" type="button">-</button>
  <button class="btn_number  btn_0" type="button">0</button>
  <button class="btn_number  btn_point" type="button">.</button>
  <button class="btn_number  btn_result" type="button">=</button>
  <button class="btn_number  btn_plus" type="button">+</button>
</div>

是否可以在不向布局中添加第三方标签并且不为每个按钮分配位置的情况下完成此操作？我想要一个简单的计算器显示，并在右上角显示重置按钮

如何在网格中对齐元素？

0 个答案: