Javascript CSS网格项堆叠在彼此的顶部，而不是网格区域

链接到代码沙盒：

我有以下网格模板设置：

.calculator {
  margin: auto;
  vertical-align: center;
  width: 30%;
  height: 300px;
  background-color: blue;
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: repeat(4, auto);
  grid-template-areas:
    "display display display display"
    "clear clear clear method"
    "number number number method"
    "number number number method"
    "number number number method"
    "posNeg number decimal method";

  #display {
    display: block;
    grid-area: display;
    margin: 5px;
    resize: none;
    text-align: right;
    font-size: 40px;
    width: 95%;
    height: 100px;
  }

  .clear {
    display: block;
    grid-area: clear;
  }

  .number {
    display: block;
    grid-area: number;
  }

  .method {
    display: block;
    grid-area: method;
  }

  .posNeg {
    display: block;
    grid-area: posNeg;
  }

  .decimal {
    display: block;
    grid-area: decimal;
  }
}

每个div中的按钮都由React中的以下JSX生成：

function Calculator() {
  return (
    <div className="container">
      <h1>Javascript Calculator</h1>
      <div className="calculator">
        <textarea id="display" />
        {types.map(y => (
          <div className={y} key={y}>
            {buttons.map(
              x =>
                x.type === y ? (
                  <button id={x.id} key={x.id}>
                    {x.name}
                  </button>
                ) : null
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

函数计算器（）{
返回(
Javascript计算器
{types.map（y=>(
{buttons.map(
x=>
x、 类型===y(
{x.name}
)：null
)}
))}
);
}

由于某些原因，我的div不考虑它们在网格区域中的位置，而是在设置其网格区域属性时在底部渲染。我尝试设置为display:block；在每个div类中，以及在父类中，我尝试将position设置为几个不同的值。我最初自动生成了每个按钮，但包装它们的div不存在，在这种情况下，每个按钮仍然呈现在底部，占据了容器元素的整个底部50%

这就是它看起来的样子：

---

这不是

网格模板区域的有效值

：

grid-template-areas:
  "display display display display"
  "clear clear clear method"
  "number number number method"
  "number number number method"
  "number number number method"
  "posNeg number decimal method";

所有区域名称必须在网格内形成矩形，但

number

不能形成矩形，您可以将悬挂的

number

更改为

decimal

，例如，修复它：

grid-template-areas:
  "display display display display"
  "clear clear clear method"
  "number number number method"
  "number number number method"
  "number number number method"
  "posNeg decimal decimal method";

---

成功了，谢谢！我不知道这是个限制。