CSS网格项目相互堆叠而不是尊重网格区域[重复]

Posted 2023-02-22

【中文标题】CSS网格项目相互堆叠而不是尊重网格区域[重复]

【英文标题】：CSS grid items stacking on top of each other instead of respecting grid-area [duplicate]

【发布时间】：2018-12-29 16:38:44

【问题描述】：

代码沙箱链接：https://codesandbox.io/s/rw0j2orqmp

我有以下网格模板设置：

.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>
  );

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

这就是它的样子：

【参考方案1】：

这不是grid-template-areas 的有效值：

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";

【讨论】：

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