Одинаковая высота контейнера h2 для всех столбцов сетки CSS

Question

Как сделать все размеры контейнера h2 одинаковыми с JavaScript и без JavaScript?Примечание Заголовок h2 исходит из базы данных, которая может занимать 1/2/3 пробела.Я хочу максимальный размер строки для всего контейнера?

img {
  max-width: 100%;
  height: auto;
}

.grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-column-gap: 2rem;
}

<div class="container">
  <div class="grid">
    <div class="items">
      <div class="item-title">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
      </div>
      <img src="https://via.placeholder.com/350x150" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="items">
      <div class="item-title">
        <h2>The quick brown fox jumps over the lazy dog.</h2>
      </div>
      <img src="https://via.placeholder.com/1400x600" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="items">
      <div class="item-title">
        <h2>The color is Green</h2>
      </div>
      <img src="https://via.placeholder.com/783x512" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="items">
      <div class="item-title">
        <h2>The quick brown fox jumps over the lazy dog.</h2>
      </div>
      <img src="https://via.placeholder.com/450x273" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

Вот демоверсия CodePen: https://codepen.io/rejaulkarim/pen/xaXBLP

Answer 1

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

h2
{
font-size:20px;
width: auto;
}

Это должно делать вашу работу так, как вы хотите, Спасибо.

Answer 2

Вы можете добавить некоторые свойства css к h2 или item-title

h2 {
 line-height: 1.2;
 font-size: 25px;
 height: 90px;
}

Если вы знаете максимальное число, вы можете рассчитать height

height = maximum number * line height * font-size

в этом примере: 90 = 25 * 1.2 * 3