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

【问题标题】：Same h2 container height for all CSS grid column所有 CSS 网格列的相同 h2 容器高度
【发布时间】：2018-09-07 14:22:00
【问题描述】：

如何使用 JavaScript 和不使用 JavaScript 使所有 h2 容器高度相同？注意 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

【问题讨论】：

标签： javascript html css grid

【解决方案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

【讨论】：

【解决方案2】：

在您的 css 文件或样式标签中，将代码放在下面。请注意，您插入所需的 font-size。

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

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

【讨论】：