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

Question

为了让我对前端有所了解，我决定创建一个简单的计算器。看来，使用 grid-layout 因为内容在前期是很清楚的，不会改变，而且我希望能够使用不同大小的按钮，以及垂直和水平。

为了更好地可视化我的问题，我已经创建了一个 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 并渲染按钮和里面的显示。

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

现在，我的问题是第一行，它是一个... div-容器有两个 p-元素。

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)似乎与其他行有很大的不同。我希望所有的行都有完全相同的高度。.display 似乎会随着 font-size 的 .formula 和 .current我不希望它在我换衣服的时候长出来。font-size 含有的 p-.display的大小会有很大的变化，如果你在使用的是 .formula 元素为空（即 ''). 似乎是 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每一个都占据了1个相等的可用空间（关于使用的一个警告是 fr: 空闲空间是在任何非弹性项目之后计算的）。)

所以很明显，我遗漏了一件事，那就是我希望所有的行都是等高的。

谢谢 @arieljuod 在评论中指出了默认值的问题。margins 在...上 p-tag!

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-标签仍然折叠成一个 height 为0，当它没有内容时，即使是 row-height 并没有改变了。这还是导致了一种不干净的行为，在这种行为中，下层的 p-元素是 "跳 "起来的，当上部的 p-元素被重新设置，以占据可用的空间。height 然后回落到按下的按钮上，当上面的 p-标签 height 越来越多，因此 height 上层 p-元素。

为了避免这种情况，我添加了 min-height: 25% 至 p-标签，所以现在的 height 是永远不会下降到可用空间的25%以下，这就避免了上面提到的较低的 p-元素。

这就是现在的样子。