How to manage bootstrap Mansory col height?

Question

I don't understand how to change the height of my column in a way to have three elements in my first and second column. I'm new to design element so a little help would be very helpful for me

Mock-up that I want to create:

My code looks like this:

<div class="card-columns pl-5 pr-5">
<!-- col 1-->
  <div class="mb-3">
      <h1>Lorem Ipsum</h1>
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Familly-card-hide.png" alt="Card image cap">
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
  </div>
  <!-- col 2-->
  <div class="card">
      <img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Dog-card-hide.png" alt="Card image cap">
  </div>
  <div>
          <span>Lorem ipsum ipsum<img src="assets/Circle-arow-btm.png" alt=""
                                         style="padding-left: 10px; transform: rotate(270deg);"> </span>
  </div>
  <!-- col 3-->
  <div class="card" style="width: 300px;height: auto;">
      <img class="card-img-top" src="assets/Fried-card-hide.png" alt="Card image cap">
  </div>
  <div class="card" style="width: 300px;height: auto;">
      <img class="card-img-top" src="assets/work-card-hide.png" alt="Card image cap">
  </div>
</div>

I hope you can help me to understand how Masonry work in a way to help me with this code.

Answer 1

Bootstrap Masonry using .card-columns is not so flexible solution for this case. Better to use simple Bootstrap grid system. I made three columns, which are .col-sm-6, .col-sm-4 and .col-sm-2. As you probably now, BS grid contains of 12 columns, so we have 6+4+2=12 columns here. In my example the sizes of the blocks will depend on the proportions of image inside. .img-fluid class makes images max-width: 100%; so thew will not tear the parent block.

This example made by using only Bootstrap 4 classed, for instance. If you want to add some specific setting - you will need to write additional CSS classes and their properties.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container mt-5">
  <div class="row">
    <!-- col 1-->
    <div class="col-sm-6 px-1">
      <div class="mb-2">
        <h1>Lorem Ipsum</h1>
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x600">
      </div>
      <div class="mb-2 text-right">
        <img class="img-fluid w-75" src="https://via.placeholder.com/1000x600">
      </div>
    </div>
    <!-- col 2-->
    <div class="col-sm-4 mt-1 px-1">
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x600">
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1000">
      </div>
      <div class="text-right">
        <span>Lorem ipsum ipsum<img src="https://via.placeholder.com/36x36" alt=""style="margin-left: 10px; transform: rotate(270deg);"> </span>
      </div>
    </div>
    <!-- col 3-->
    <div class="col-sm-2 px-1">
      <div class="mb-2 mt-4">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1300">
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1100">
      </div>
    </div>
  </div>
</div>

More about Bootstrap technologies I used in this exapmple:

1. Grid https://getbootstrap.com/docs/4.0/layout/grid/
2. Spacing https://getbootstrap.com/docs/4.0/utilities/spacing/
3. image-fluid https://getbootstrap.com/docs/4.0/content/images/
4. Sizing https://getbootstrap.com/docs/4.0/utilities/sizing/