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

Css – How to dynamically adjust the card height in React without a fixed height?

I have a data array with multiple cards. Some cards have more content than others. I want to adjust the card height dynamically so that all cards have the same height. how can i achieve this?

<Row>
      {data.map((item) => (
        <Col xs={12} sm={12} md={6} lg={4} xl={3} xxl={3} className="mb-4">
          <Card>
            {item.content}
          </Card>
        </Col>
      ))}
    </Row>```
Tags:

2

Answers


  1. 0

    You can add this style to the container:

    .container {
  display: flex;
  align-items: stretch;
}

    .container {
  display: flex;
  align-items: stretch;
  padding: 5px;
  gap: 5px;
  border: solid blue 1px;
  border-radius: 5px;
}

.child-obj{
  border: solid black 1px;
  border-radius: 5px;
  padding: 5px;
}
    <div class="container">
  <div class="child-obj">
    <p>Some content...</p>
  </div>
  <div class="child-obj">
    <p>Some content...</p>
    <p>Some content...</p>
    <p>Some content...</p>
  </div>
  <div class="child-obj">
    <p>Some content...</p>
    <p>Some content...</p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can do this with a grid layout using the grid-auto-rows css property.

    Ex:

    <div class="container">
    <div class="card">
        <p>Hello World!</p>
    </div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

.container
{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
}

.card
{
  background-color: red;
  width: 50px;
}

    All of the cards will be the same height as the tallest card.

    Live code: https://jsfiddle.net/dtyu8Lqv/84/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search