所有CSS网格列的h2容器高度相同

Question

如何使用JavaScript和没有JavaScript使所有h2容器高度相同？注意h2标题来自数据库，可占用1/2/3行空间。我想要所有容器的最大线路sapce？

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添加一些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

Answer 2

在你的css文件或样式标签里面，把代码放在下面。请注意，您插入所需的字体大小。

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

这应该按照您的意愿完成您的工作，谢谢。