0

I want to make the card title the same size as the biggest one in each row so that the card offer aligns in each row. As seen in the snippet below the other content within the card can vary. Is there any way to accomplish this with CSS, possibly somehow with using the flex-box?

Since the card title can also vary I don't want to have a set height for that, but just have it take the height of the largest one.

.container {
  width:900px;
  margin:0 auto;
}

.cards-container {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

.card-container {
  display:flex;
  margin: 1%;
  flex-direction:column;
  flex-basis:25%;
  align-items:center;
  margin-bottom:20px;
  border:1px solid black;
  padding:10px 20px;
}

.card-offer {
  color:red;
  margin-bottom:10px;
}

.card-price {
  color:purple;
  margin-bottom:15px;
  font-size:20px;
}

.card-description {
  margin-bottom:30px;
}
.card-link {
  color:blue;
}

.card-title {
  margin-bottom:20px;
  text-align:center;
}

.card-points ul {
  padding-left:0;
}

.card-points li {
  list-style:none;
}
<div class="container">
<div class="cards-container">
    <div class="card-container">
      <div class="card-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. </div>
      <div class="card-offer">card offer </div>
      <div class="card-price"> Card Price </div>
      <div class="card-description">card description goes here</div>
      <div class="card-link">card link</div>
  </div>
    <div class="card-container">
       <div class="card-title">Lorem ipsum dolor sit amet </div>
      <div class="card-offer">card offer </div>
      <div class="card-price"> Card Price </div>
      <div class="card-description">card description goes here</div>
      <div class="card-link">card link</div>
  </div>
    <div class="card-container">
      <div class="card-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, explicabo expedita velit praesentium eos amet evenie</div>
      <div class="card-offer">card  offer </div>
      <div class="card-price"> Card Price </div>
      <div class="card-description">card description goes here</div>
      <div class="card-link">card link</div>
      <div class="card-points">
        <ul>
          <li>card bullets</li>
          <li>card bullets</li>
          <li>card bullets</li>
          <li>card bullets</li>
        </ul>
      </div>
  </div>
    <div class="card-container">
            <div class="card-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. </div>
      <div class="card-offer">card  offer </div>
      <div class="card-price"> Card Price </div>
      <div class="card-description">card description goes here</div>
      <div class="card-link">card link</div>
  </div>
    <div class="card-container">
<div class="card-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, explicabo expedita </div>
      <div class="card-offer">card  offer </div>
      <div class="card-price"> Card Price </div>
      <div class="card-description">card description goes here</div>
      <div class="card-link">card link</div>
  </div>
    <div class="card-container">
      <div class="card-title">Title that can be long sometimes and not some toher times</div>
      <div class="card-offer">card offer </div>
      <div class="card-price"> Card Price </div>
      <div class="card-description">card description goes here</div>
      <div class="card-link">card link</div>
  </div>
</div>
</div>
rgc998
  • 299
  • 2
  • 15
  • Does this answer your question? https://stackoverflow.com/questions/63436397/bootstrap-card-header-same-height-for-all – isherwood Nov 05 '21 at 13:19
  • no that only works when the content below the title will be the same height – rgc998 Nov 05 '21 at 13:25
  • I think you can achieve that by display: grid; – mat Nov 05 '21 at 13:30
  • Maybe little bit of JavaScript will work out for you – Rana Nov 05 '21 at 13:32
  • 1
    Does this answer your question? [Align child elements of different blocks](https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks) – Rana Nov 05 '21 at 13:43

1 Answers1

0

You can achieve this with display: grid

.cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
}
mat
  • 130
  • 2
  • 2
  • 12