Html Question posted in
Some basic documentation can be found here.

Html – How to Ensure Equal Height for Elements in Different Divs?

I have three different cards, each with varying content. I want to ensure that all elements within these cards maintain the same height, even though the content differs. The goal is to achieve a uniform look across all cards, as shown in the image below:

Check reference image

I thought i can be done with css grid but can not get idea how to apply.Could someone please guide me on how to achieve equal heights for all corresponding elements in these cards? Any help or suggestions would be greatly appreciated!

Thank you in advance.

Tags:

3

Answers


  1. 0

    The easy way is to use flex.

    See this sample:

    .container {
  background: yellow;
  display: flex;
  gap: 10px;
}
.item {
  background: gray;
  border-radius: 5px;
  flex: 1;
  padding: 5px;
  width: 300px;
  
}
    <div class="container">
  <div class="item">1 2 3 4<br>5 6 7 8</div>
  <div class="item">
    <div>a b c d</div>
    <div>e f g h</div>
    <div>i j k l</div>
  </div>
  <div class="item">hello world</div>
</div>
    Login or Signup to reply.
  2. 0

    Try playing around with min-height: 100% on the respective divs. See the example below.

    .row {
  display: flex;
  margin: 5px;
  background-color: red;
}

.col {
  min-height: 100%;
  margin: 5px;
  padding: 1rem;
  background-color: yellow;
  border-radius: 5px;
}
    <div class="row">

  <div class="col">
    This is some content. This is some content. This is some content.
  </div>

  <div class="col">
    This is some content. This is some content. This is some content. This is some content. This is some content. This is some content.
  </div>

</div>

    I have added the background color to make the margins stand out.

    Login or Signup to reply.
  3. 0

    Use display: flex for parent element, and set height: auto for the children:

    .parent {
  display: flex;
}

.my-card {
 height: auto;
 background-color: #cdcdcd;
 border-radius: 10px;
 padding: 10px;
 margin: 10px;
}
    <div class="parent">
  <div class="my-card">
    <p>Your Content</p>
    <p>Your Content</p>
    <p>Your Content</p>
    <p>Your Content</p>
    <p>Your Content</p>
  </div>
  <div class="my-card">
    <p>Your Content</p>
    <p>Your Content</p>
    <p>Your Content</p>
  </div>
    <div class="my-card">
    <p>Your Content</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search