Как исправить высоту столбцов, чтобы они отображались в соответствии с их содержанием?

Question

Я хочу высоту карт в соответствии с их содержанием и не равны друг другу. Карты имеют одинаковую высоту при выравнивании рядом друг с другом, я хочу избежать этого?

Я пытался использовать класс карт-столбцов из начальной загрузки, но столбцы по-прежнему имеют одинаковые размеры.

Answer 1

Попробуй использовать bootstrap тебе поможет

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
  height: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
  <div class="col-sm-4">
    <div class="card">
      <h3>Card 1</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="card">
      <h3>Card 2</h3>
      
    </div>
  </div>
   
  <div class="col-sm-4">
    <div class="card">
      <h3>Card 4</h3>
      <p>Some text</p>
      <p>Some text</p>
       <p>Some text</p>
        <p>Some text</p>
         <p>Some text</p>
    </div>
  </div>
</div>
</div>