CODEWITHSUNDEEP
htmlcss
Jayraj
Jayraj

Reputation: 430

Height of cards in Grid is not dynamic

How can I fix height of given card according to data content in it.

Here is my HTML code:

<div  class="parentOfCards">
         <div  class="dataCard" *ngFor='let item of Weekly | async' style="height: auto;">
            <div style="border: 1px solid #707070; border-bottom: 0;">
               <div class="cardTitles" style="padding: 0 5%;">{{item.name}}</div>
              <br>
               <div class="cardTitles" style="padding: 0 5%; font-size: 1em;">{{item.time.toString().slice(0,21)}}</div>
              <br>
            </div>
            <div style="height: 50px; display: grid; grid-template-columns: 1fr 1fr;">
               <button style="border: 1px solid #707070; padding: 13px; background: none;"> Edit</button>
               <button style="border: 1px solid #707070; padding: 13px; border-left: 0; background: none;"> Delete</button>
            </div>
         </div>
      </div>

CSS code:

.parentOfCards {
  width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.dataCard {
  height: auto;
  width: 350px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  margin: 10px auto;
}

enter image description here

Here is the current output of my code: In the first row, first two cards not having enough content are also as lengthy as third card. However, in second row all of the card are having same length content so it looks perfect. How can I achieve dynamic height over here in first row as well?

Upvotes: 0

Views: 308

Answers (1)

fen1x
fen1x

Reputation: 5880

Set display: flex; on .dataCard and set flex: 1; on cards content:

.parentOfCards {
  width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.dataCard {
  height: auto;
  width: 350px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  margin: 10px auto;
  display: flex;
  flex-direction: column;
}

.dataCard-content {
  flex: 1;
  height: 100%;
  border: 1px solid #707070;
  border-bottom: 0;
}
<div class="parentOfCards">
  <div class="dataCard">
    <div class="dataCard-content">
      <div class="cardTitles" style="padding: 0 5%;">Name 1</div>
      <br>
      <div class="cardTitles" style="padding: 0 5%; font-size: 1em;">Time 1</div>
      <br>
    </div>
    <div style="height: 50px; display: grid; grid-template-columns: 1fr 1fr;">
      <button style="border: 1px solid #707070; padding: 13px; background: none;"> Edit</button>
      <button style="border: 1px solid #707070; padding: 13px; border-left: 0; background: none;"> Delete</button>
    </div>
  </div>
  <div class="dataCard">
    <div class="dataCard-content">
      <div class="cardTitles" style="padding: 0 5%;">Name 2</div>
      <br>
      <div class="cardTitles" style="padding: 0 5%; font-size: 1em;">Time 2</div>
      <br>
    </div>
    <div style="height: 50px; display: grid; grid-template-columns: 1fr 1fr;">
      <button style="border: 1px solid #707070; padding: 13px; background: none;"> Edit</button>
      <button style="border: 1px solid #707070; padding: 13px; border-left: 0; background: none;"> Delete</button>
    </div>
  </div>
  <div class="dataCard">
    <div class="dataCard-content">
      <div class="cardTitles" style="padding: 0 5%;">Name 3</div>
      <br>
      <div class="cardTitles" style="padding: 0 5%; font-size: 1em;">Time 3, with very long description that wraps to another line</div>
      <br>
    </div>
    <div style="height: 50px; display: grid; grid-template-columns: 1fr 1fr;">
      <button style="border: 1px solid #707070; padding: 13px; background: none;"> Edit</button>
      <button style="border: 1px solid #707070; padding: 13px; border-left: 0; background: none;"> Delete</button>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions