网格容器第一行的奇怪行为

Question

为了了解前端，我决定创建一个简单的计算器。使用 grid-layout 似乎是个好主意，因为内容在前期就众所周知，不会改变，而且我希望能够在垂直和水平方向上使用不同大小的按钮。使用 4x6 网格，我可以根据需要布置所有内容。

为了更好地可视化我的问题，我为其创建了一个 Codepen.io。我的问题是，虽然我使用的是 grid-layout，但第一行的行高不同。

这是 CSS:

.calculator-grid-container {
      height: 70vh;
      width: 60vw;
      max-width: 50vh;
      border-style: solid;
      border-width: 3px;
      border-color: white;
      background-color:#2e323a;
      border-radius: 1%;
      box-shadow: 0 0 10px whitesmoke;
      /* grid container config */
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-gap: 0px;
      padding: 10px;
    }

我在 div 上设置 class 并在其中渲染按钮和显示：

render() {
    return (
      <div className='calculator-grid-container'>
        <Display current={this.state.current} formula={this.state.formula}></Display>

        <Button name='AC' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='/' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='*' handleButtonPressed={this.handleButtonPressed}></Button>

        <Button name='1' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='2' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='3' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='-' handleButtonPressed={this.handleButtonPressed}></Button>

        <Button name='4' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='5' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='6' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='+' handleButtonPressed={this.handleButtonPressed}></Button>

        <Button name='7' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='8' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='9' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='=' handleButtonPressed={this.handleButtonPressed}></Button>

        <Button name='0' handleButtonPressed={this.handleButtonPressed}></Button>
        <Button name='.' handleButtonPressed={this.handleButtonPressed}></Button>
      </div>
    );
  }

在按钮上，我使用 flex-layout 使文本居中：

.button {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}

当然要让它们相应地跨度，例如：

.AC-button {
  grid-column-start: 1;
  grid-column-end: 3;
}

现在，我的问题是第一行，它是一个包含两个 p 元素的 div 容器：

render() {
    return (
      <div className='display'>
        <p className='formula'>
          {this.props.formula}
        </p>
        <p className='current' id='display'>
          {this.props.current}
        </p>
      </div>
    );
  }

他们的CSS：

.display {
  background-color: black;
  text-align: right;
  font-family: digital;
  padding: 5px 10px 0 0;
  /* grid config */
  grid-column-start: 1;
  grid-column-end: 5;
  /* flex-layout inside the div to align the p-elements */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: right;
}

.formula {
  opacity: 0.5;
  overflow-wrap: break-word;
  word-wrap: break-word; 
}

.current {
  font-size: 46px;
}

上述方法的问题： 1. 第一行的高度（.display）似乎与其他所有行的高度不同。我希望所有行的高度完全相同。 2. .display 的大小似乎随着 .formula 和 .current 的 font-size 而变化，我不希望它在更改 [=25= 时变大] 包含 p 个元素。 3. 如果 .formula 元素为空（即 ''），.display 的大小会发生根本变化。如果 p 元素为空，则它似乎不存在。如果 p 元素为空，我不希望大小发生变化。

也许我遗漏了什么。有人可以帮忙吗？

空.formula（p-elem = ''）的截图，注意高度：

非空屏幕截图 .formula，请注意不同的高度：

Answer 1

我提出了以下解决方案，它确实解决了上述所有问题（1. 所有行的高度都固定且相等，2. .display-div 的高度无论内容如何都不会变化.formula p-标签和 3. 不管 font-size 设置在它们上）。

grid-template-rows: repeat(6, 1fr);

这是创建 6 个 rows，每个占用可用空闲 space 的 1 个相等部分（使用 fr 的一个警告：空闲 space 是在之后计算的任何非弹性物品）。

很明显，我缺少的东西实际上是指定我希望所有行的高度相等的事实。

感谢@arieljuod 在评论中指出 p-标签上的默认 margins！

p {
  margin-top: 0; /* remove default margins */
  margin-bottom: 0;  /* remove default margins */
  min-height: 25%; /* avoid dropping height to 0 for empty p-tags */
}

我注意到 p 标签在没有内容时仍然折叠为 0 的 height，即使 row-height 不再改变。这仍然会导致一种不干净的行为，即当上部 p 元素被重置为占用可用的 height 然后返回时，下部 p 元素 'jumping' 向上当设置上部 p-标签 height 时按下按钮，因此 height 被上部 p- 元素回收。

为了避免这种情况，我将 min-height: 25% 添加到 p 标签，所以现在 height 永远不会低于可用 space 的 25%，这避免了p-元素的上述行为。

这是现在的样子：

网格容器第一行的奇怪行为

Weird behavior of first Row of a Grid Container

html

css

grid-layout