How to make equal card height in css?

Question

   <div className={Styles.didslider}>
        <Slider {...settings}>
          {CardData.map((data, index) => (
            <div className={Styles.didslidecard} key={index}>
              <DidyouknowCard
                iconimage={data.iconimage}
                title={data.title}
                description={data.description}
              />
            </div>
          ))}
        </Slider>
      </div>

I need the didyouknowcard in the same height how to do that without giving static width and height based on dynamic content height need to match?

Is this flex? Then you can use `align:items: stretch`, see also the flex documentation : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Kokodoko, Apr 10 '23 at 09:37
it's in the slider i can't use `display: flex,` If i add display flex didslider it doesn't display the slider content @Kokodoko — Asmath S, Apr 10 '23 at 09:48
In that case you'll have to include your CSS, otherwise it's hard to see how your layout is built. — Kokodoko, Apr 10 '23 at 10:00

score 0 · Answer 1 · answered Apr 10 '23 at 09:37

0

You can use min-height:... attribute in css file for card's div class

answered Apr 10 '23 at 09:37

webworm84

324
2
13

That only works if you know the height of the highest card. – Kokodoko Apr 10 '23 at 09:59
Yes that's right. I usually control height from chrome inspect elements for like this situations. But using this solution in general may cause some incompatible appearance in different card rows of page – webworm84 Apr 10 '23 at 10:07

score 0 · Answer 2 · answered Apr 10 '23 at 10:15

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  padding: 20px;
  margin-bottom: 20px;
  flex-basis: calc(33.33% - 20px);
}

<div class="card-container">
  <div class="card">
    <h3>Card 1</h3>
    
  </div>
  <div class="card">
    <h3>Card 2</h3>
    
    
  </div>
  <div class="card">
    <h3>Card 3</h3>
    
  </div>
</div>

TheNikCD · Answer 3 · 2023-04-10T10:45:40.873

As you say, that you can't use flexes, try to use one of this methods:

Table display with using display: table and display: table-cell properties

.card-group {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 10px;
}

.card {
    display: table-cell;
    vertical-align: top;
    width: 33.33%;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
}

<div class="slider">
    <div class="card-group">
        <div class="card">
            <h1>Where was it consumed the most?</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad adipisci architecto consequatur,
            corporis, cupiditate deleniti distinctio illo iste magni nihil odit officia porro quidem reiciendis
            reprehenderit similique voluptate voluptates.
        </div>
        <div class="card">
            <h1>Where was it eaten the most?</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

Grid display with using display: grid, grid-template-columns, grid-gap:

.card-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.card {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
}

<div class="slider">
    <div class="card-group">
        <div class="card">
            <h1>Where was it consumed the most?</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad adipisci architecto consequatur,
            corporis, cupiditate deleniti distinctio illo iste magni nihil odit officia porro quidem reiciendis
            reprehenderit similique voluptate voluptates.
        </div>
        <div class="card">
            <h1>Where was it eaten the most?</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

They both do the same height but in different ways, look what method will be better in your project.

How to make equal card height in css?

3 Answers3