Странное поведение первой строки контейнера сетки

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 и рендеринг кнопок и отображения внутри него:

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

Проблемы с вышеуказанным aproache: 1. Высота первой строки (.display), кажется, сильно отличается от всех другие ряды. Я хочу, чтобы все строки имели одинаковую высоту. 2. Размер .display, кажется, зависит от font-size из .formula и .current. Я не хочу, чтобы он увеличивался при изменении font-size содержащих p -элементов. 3. Размер .display радикально меняется, если элемент .formula пуст (т.е. ''). Кажется, что p -элемент не существует, если он пуст. Я не хочу, чтобы размер менялся, если элемент p пуст.

Может, мне что-то не хватает. Может кто поможет?

Скриншот с пустым .formula (p-elem = ''), обратите внимание на высоту:

Скриншот с непустым .formula, обратите внимание на разную высоту:

Answer 1

Я придумал следующее решение, которое решает все вышеупомянутые проблемы (1. все строки имеют фиксированную и одинаковую высоту, 2. высота .display-div не изменяется независимо от содержимого .formula p -tag и 3. независимо от font-size, установленного для них).

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

Это создает 6 rows, каждый из которых занимает 1 равную долю доступного свободного места (одно предупреждение при использовании fr: свободное пространство рассчитывается после любых негибких элементов).

Очевидно, то, что мне не хватало, фактически указывало на то, что я хотел, чтобы все строки были одинаковой высоты.

Спасибо @arieljuod за указание в комментарии на margins по умолчанию в теге p!

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 -tag height был установлен, и, следовательно, height был восстановлен верхним p -элементом.

Чтобы избежать этого, я добавил min-height: 25% к p -tag, так что теперь height никогда не опускается ниже 25% доступного пространства, что позволяет избежать вышеупомянутого поведения нижнего p -элемента.

Вот как это теперь выглядит: