如何通过CSS Grid拉伸计算器指定元素且不整体移位？

需求 #

拉伸带红色边框的nums-btns和action-btns元素，不移动整个计算器或按钮的位置。此前尝试套新div、调整宽度、使用伪类均未成功。

原代码 #

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  height: 100%;
  background-color: aliceblue;
}

.main-calc {
  background-color: #333;
  width: 400px;
  height: 600px;
  margin: auto;
  margin-top: 200px;
  box-shadow: 10px 10px 10px gold;
}

.display {
  width: 100%;
  height: 10%;
  text-align: right;
  font-family: sans-serif;
  font-size: 48px;
  background-color: azure;
  border: 5px solid green;
}

.buttons-block {
  display: grid;
  grid-template-columns: 5fr 2fr;
  background-color: rgb(132, 132, 132);
  margin-top: 15%;
  height: 80%;
}

.nums-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: space-evenly;
  border: 5px solid red;
  /* height: 100%;
    width: 80%; */
}

.nums-btns:only-child(zero) {}

.btn {
  width: 70px;
  height: 70px;
  font-size: 2rem;
  border-radius: 50%;
  margin: 10px;
}

.action-btns {
  display: grid;
  grid-template-columns: 1fr;
  align-content: space-evenly;
  justify-items: center;
  border: 5px solid red;
  /* height: 100%;
    width: 20%; */
}

HTML

<div class="main-calc">
  <div class="display">
    <p>0</p>
  </div>
  <div class="buttons-block">
    <div class="nums-btns">
      <button class="btn">7</button>
      <button class="btn">8</button>
      <button class="btn">9</button>
      <button class="btn">4</button>
      <button class="btn">5</button>
      <button class="btn">6</button>
      <button class="btn">1</button>
      <button class="btn">2</button>
      <button class="btn">3</button>

      <button class="btn zero">0</button>
      <button class="btn equal">=</button>
    </div>
    <div class="action-btns">
      <button class="btn">+</button>
      <button class="btn">-</button>
      <button class="btn">*</button>
      <button class="btn">/</button>
    </div>
  </div>
</div>

解决方案 #

问题核心是nums-btns和action-btns未占满父容器.buttons-block的可用空间，只需取消注释的宽高设置，让容器撑满父元素：

修改后的关键CSS代码

.nums-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: space-evenly;
  border: 5px solid red;
  height: 100%; /* 让容器撑满父元素高度 */
  width: 100%; /* 让容器撑满父元素宽度 */
}

.action-btns {
  display: grid;
  grid-template-columns: 1fr;
  align-content: space-evenly;
  justify-items: center;
  border: 5px solid red;
  height: 100%; /* 让容器撑满父元素高度 */
  width: 100%; /* 让容器撑满父元素宽度 */
}

说明 #

• 给两个红色边框容器添加width:100%和height:100%，使其完全填充.buttons-block分配的网格区域
• 原有align-content: space-evenly会保持按钮的间距和位置不变，仅拉伸容器本身到父元素边界
• 整个计算器和按钮的位置不会发生偏移，满足需求

内容的提问来源于stack exchange，提问作者W1z4rDddD_wP