CODEWITHSUNDEEP
htmlcss
John low
John low

Reputation: 1

How can I make divs inside of a column equal-height?

Problem: Divs not aligned:

The problem is when the text wraps, for example Money back guarantee, pushes the div out of alignment with 30 days. I am trying to use the grid approach to first define two columns.

My code:

.inline-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
<div class="inline-features">
    <div class="feature">
        <div class="price col-1-item">
            <span>
                Price
            </span>
        </div>
        <div class="money-back col-1-item">
            <span>
                Money back guarantee
            </span>
        </div>
        <div class="number-of-lessons col-1-item">
            <span>
                Number of lessons
            </span>
        </div>
        <div class="number-of-users col-1-item">
            <span>
               Number of users
            </span>
        </div>
        <div class="country col-1-item">
            <span>
               Based in country
            </span>
        </div>
        <div class="support col-1-item">
            <span>
                Support
            </span>
        </div>
        <div class="video-lessons col-1-item">
            <span>
                Video lessons
            </span>
        </div>
        <div class="downloadable-files col-1-item">
            <span>Downloadable files</span>
        </div>
    </div>
    <div class="feature-item">
        <div class="price-item col-2-item">
            <span>   From xx to xx </span>
        </div>
        <div class="money-back-item col-2-item">
            <span>   30 days </span>
        </div>
        <div class="number-of-lessons-item col-2-item">
            <span>   300+ </span>
        </div>
        <div class="number-of-users-item col-2-item">
            <span>   35k + </span>
        </div>
        <div class="country-item col-2-item">
            <span>  UK</span>
        </div>
        <div class="support-item col-2-item">
            <span>   24/7 live chat support </span>
        </div>
        <div class="video-lessons-item col-2-item">
            <span>   Yes </span>
        </div>
        <div class="downloadable-files-item col-2-item">
            <span>   Yes </span>
        </div>
    </div>
</div>

Upvotes: 0

Views: 54

Answers (3)

imspid3y
imspid3y

Reputation: 11

I suggest use instead of div and use CSS for border or other style

<table> 
    <tr>
       <td>PRICE</td>
       <td>From XX to XX</td>
    </tr>
</table>

Upvotes: 0

UmairFarooq
UmairFarooq

Reputation: 1315

.inline-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  font-size: 4rem;
  border: 1px solid gray;
}

.col-1-item,
.col-2-item {
  padding: 1rem;
  height:140px;
  border: 1px solid gray;
}
<div class="inline-features">
  <div class="feature">
    <div class="price col-1-item">
      <span>Price</span>
    </div>
    <div class="money-back col-1-item">
      <span>Money back guarantee</span>
    </div>
    <div class="number-of-lessons col-1-item">
      <span>Number of lessons</span>
    </div>
    <div class="number-of-users col-1-item">
      <span>Number of users</span>
    </div>
    <div class="country col-1-item">
      <span>Based in country</span>
    </div>
    <div class="support col-1-item">
      <span>Support</span>
    </div>
    <div class="video-lessons col-1-item">
      <span>Video lessons</span>
    </div>
    <div class="downloadable-files col-1-item">
      <span>Downloadable files</span>
    </div>
  </div>
  <div class="feature-item">
    <div class="price-item col-2-item">
      <span>From xx to xx</span>
    </div>
    <div class="money-back-item col-2-item">
      <span>30 days</span>
    </div>
    <div class="number-of-lessons-item col-2-item">
      <span>300+</span>
    </div>
    <div class="number-of-users-item col-2-item">
      <span>35k +</span>
    </div>
    <div class="country-item col-2-item">
      <span>UK</span>
    </div>
    <div class="support-item col-2-item">
      <span>24/7 live chat support </span>
    </div>
    <div class="video-lessons-item col-2-item">
      <span>Yes</span>
    </div>
    <div class="downloadable-files-item col-2-item">
      <span>Yes</span>
    </div>
  </div>
</div>

Upvotes: 0

Asif Jalil
Asif Jalil

Reputation: 762

Your HTML structure is not correct. Try this way.

To do this type of design, you can use table. This will be better way for manage.

.inline-features{
  width: 250px;
}

.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.col-1-item,
.col-2-item {
  border: 1px solid black;
}
<div class="inline-features">
  <div class="row">
    <div class="col-1-item">
      <span> Price </span>
    </div>
    <div class="col-2-item">
      <span> From xx to xx </span>
    </div>
  </div>
  <div class="row">
    <div class="col-1-item">
      <span> Money back guarantee </span>
    </div>
    <div class="col-2-item">
      <span> 30 days </span>
    </div>
  </div>
  <div class="row">
    <div class="col-1-item">
      <span> Number of lessons </span>
    </div>
    <div class="col-2-item">
      <span> 300+ </span>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions