Cards stacked vertically on two columns of fixed height

Question

I have a certain number of cards. I want to display them in two columns of fixed height in the following way: first I want to fill col number 1; when the end of col1 is reached, start filling col2 (see image).

How can I do that with Bootstrap 5?

cards stacked vertically on two columns

UPDATE

Here is my code:

    <div class="container-lg">
      <h2 class="">Technology Portal</h2>
      <div class="row row-cols-md-2">
    
        <div class="col col-links">
          <div class="card text-left">
            <div class="card-body">
              <p class="imp-title">Card 1</p>
              ...
            </div>
          </div>
        </div>
    
        <div class="col col-links">
          <div class="card text-left">
            <div class="card-body">
              <p class="imp-title">Card 2</p>
              ...
            </div>
          </div>
        </div>
    
        <div class="col col-links">
          <div class="card text-left">
            <div class="card-body">
              <p class="imp-title">Card 3</p>
              ...
            </div>
          </div>
        </div>
    
        <div class="col col-links">
          <div class="card text-left">
            <div class="card-body">
              <p class="imp-title">Card 4</p>
              ...
            </div>
          </div>
        </div>
    
        <div class="col col-links">
          <div class="card text-left">
            <div class="card-body">
              <p class="imp-title">Card 5</p>
              ...
            </div>
          </div>
        </div>
    
        ...
    
      </div>
    </div>

SOLUTION

Gahan Vig helped me to find the solution.

Here it is:

<style>
.masonry { /* Masonry container */
  column-count: 2;
  column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
  background-color: #eee;
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}
</style>

<div class="masonry">
  <div class="card item">
    <h1>card1</h1>
  </div>
  <div class="card item">
    <h1>card2</h1>
  </div>
  <div class="card item">
    <h1>card3</h1>
  </div>
  <div class="card item">
    <h1>card4</h1>
  </div>
  <div class="card item">
    <h1>card5</h1>
  </div>
  <div class="card item">
    <h1>card6</h1>
  </div>
  <div class="card item">
    <h1>card7</h1>
  </div>
  <div class="card item">
    <h1>card8</h1>
  </div>
  <div class="card item">
    <h1>card9</h1>
  </div>
  <div class="card item">
    <h1>card10</h1>
  </div>
</div>

More information here: https://w3bits.com/css-masonry/

@Mark, please, tell me what is wrong with my question. – Atman Dec 27 '21 at 11:20 — Atman, Dec 27 '21 at 11:20

Gahan Vig · Accepted Answer · 2021-12-27T14:03:45.700

Such type of layout is known as masonry layout. Visit this stackoverflow link to know more how to createa vertical masonry layout

Your finished code after creating the layout will look something like this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <style>
    .col-links{
      display: inline-block;
      margin: 0 0 20px;
      page-break-inside: avoid;
      break-inside: avoid;
      width: 50%;
    }
    .row{
       column-count: 2;
       column-gap: 20px;
       column-fill: balance;
      margin: 20px auto 0;
      padding: 2rem;
    }
  </style>
</head>
<body>
  <div class="container-lg">
  <h2 class="">Technology Portal</h2>
  <div class="row row-cols-md-2 w-100">

    <div class="col col-links">
      <div class="card text-left">
        <div class="card-body">
          <p class="imp-title">Card 1</p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus sequi optio explicabo delectus quaerat recusandae consectetur illo eius tempora, aperiam inventore sint fuga eum, error cum corrupti eos iure neque veniam repellat consequatur iusto quae dolor maiores. Similique quisquam nam ducimus ipsum sit quidem consectetur eaque sequi optio non cumque atque eius rerum vitae reprehenderit perferendis, sed eligendi modi inventore architecto sunt labore! Repellat magni eos officia ducimus mollitia vero necessitatibus harum accusantium perferendis explicabo. Dicta quo, sapiente fugit cumque voluptatibus ipsum neque atque, deleniti, debitis tenetur in dolore saepe molestias eum. Eius, error incidunt hic obcaecati vero ipsum nobis.
        </div>
      </div>
    </div>

    <div class="col col-links">
      <div class="card text-left">
        <div class="card-body">
          <p class="imp-title">Card 2</p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus maiores corporis placeat magnam laboriosam fugiat ut assumenda, aperiam sequi rerum reprehenderit vitae animi quasi neque error, amet nulla quae ea. Eius, consequuntur enim architecto incidunt facere fuga, nam modi ea, maxime labore nisi nobis eveniet deleniti quia expedita cum blanditiis?
        </div>
      </div>
    </div>

    <div class="col col-links">
      <div class="card text-left">
        <div class="card-body">
          <p class="imp-title">Card 3</p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, dolorum.
        </div>
      </div>
    </div>

    <div class="col col-links">
      <div class="card text-left">
        <div class="card-body">
          <p class="imp-title">Card 4</p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi provident facilis voluptatem voluptate neque illum temporibus sit beatae, eum id iste possimus eveniet inventore ad quaerat hic, asperiores repellendus quia error debitis mollitia culpa, in delectus rem. Dignissimos voluptates voluptatem ut! Eum adipisci illo aliquam officiis hic doloribus quos odit accusantium dolorem sapiente, esse facilis exercitationem asperiores! Quas, consectetur, corporis eum similique earum quibusdam aliquam maxime temporibus animi, odio ratione nesciunt quaerat. Odit quos atque sit porro quod perspiciatis deleniti!
        </div>
      </div>
    </div>

    <div class="col col-links">
      <div class="card text-left">
        <div class="card-body">
          <p class="imp-title">Card 5</p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio labore numquam culpa qui hic id libero soluta illo corporis inventore, deserunt porro corrupti nihil repudiandae.
        </div>
      </div>
    </div>

    ...

  </div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</html>

Thank you for your answer. The library is fine, but it doesn't solve my problem. I need to order the cards vertically. — Atman, Dec 27 '21 at 12:31
So, in your situation you need only two columns, so u can give the width of the items `50%`. The masonry will remain horizontal but it will look like that it is vertical masonry layout. — Gahan Vig, Dec 27 '21 at 13:01
I added the code above. How would you change it to make it behave the way I need? — Atman, Dec 27 '21 at 13:14
I have made a vertical masonry layout from the code u gave above. — Gahan Vig, Dec 27 '21 at 13:22
In the first column of your code there is Card 1 and Card 5. Instead I want that under card1 there is card2, then card3, eccetera... Only when I reach the maximun height of the container (or of the row) I put the remaining cards in the second column. — Atman, Dec 27 '21 at 13:35
Visit this stackoverflow Post make a vertical masonry layout by only using css. https://stackoverflow.com/questions/44377343/css-only-masonry-layout. **The first answer to that question will be perfect for you** — Gahan Vig, Dec 27 '21 at 13:43
Thank you! It's exactly what I need. This is the link: https://w3bits.com/css-masonry/ — Atman, Dec 27 '21 at 14:00
If you put your last comment in your answer, I'll accept it. — Atman, Dec 27 '21 at 14:01
I have added the code of vertical masonry layout in my answer. I hope that you'll find it helpful — Gahan Vig, Dec 27 '21 at 14:09

Cards stacked vertically on two columns of fixed height

1 Answers1