CODEWITHSUNDEEP
javascripthtmlcssgrid
Md. Rejaul Karim
Md. Rejaul Karim

Reputation: 115

Same h2 container height for all CSS grid column

How to make all h2 container height same with JavaScript and without JavaScript? Note The h2 title is coming from database which can take 1/2/3 line space. I want maximum line sapce for all container?

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>

Here is CodePen Demo: https://codepen.io/rejaulkarim/pen/xaXBLP

Upvotes: 0

Views: 425

Answers (2)

Neeraj Kamat
Neeraj Kamat

Reputation: 354

inside your css file or style tag,put the code below. Please note that you insert font-size that you want.

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

This should do your work as you want it to be ,Thank You.

Upvotes: 1

Nika Kurashvili
Nika Kurashvili

Reputation: 6472

You can add some css properties to h2, or item-title 

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

If you know maximum number, you can calculate height

height = maximum number * line height * font-size

in this example: 90 = 25 * 1.2 * 3

Upvotes: 2

Related Questions