Question 45798 in CSS Question posted in
Some basic documentation can be found here.

How to make equal card height in css?

   <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?

enter image description here

Tags:

3

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

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

    1. 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>
    1. 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.

    Login or Signup to reply.
  3. 0 
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search