Bootstrap 4 card-columns with grid

Question

Thanks to the many questions and answers on stackoverflow about card-columns , I could set tiled col s in row but it looks like some kind of padding or margin or else is breaking bootstrap's 12 columns per row "rule".

I am trying to achieve a masonry / pinterest tile layout, with Tile 1 and Tile 2 columns going under the description column, white text remains under picture profile .

In the below example, when I set the width of the description col to col-xl-4 makes it remain under the profile picture col instead of next to it.

Moreover, the description column takes the same height as the profile picture column.

   <div class="container-fluid">
        <div class="row card-columns">
            <div class="col-xl-8 card">
                <div class="card-body">
                    <h2>Profile picture</h2>
                    <img src="https://via.placeholder.com/900x500.jpg" alt="" class="img-fluid rounded">
                </div>
            </div>

            <div class="col-xl-4 card">
                <div class="card-body">
                    <h2>Description</h2>
                </div>
            </div>  

            <div class="col-xl-8 card">
                <div class="card-body">
                    <h2>Text</h2>
                </div>
            </div>  

            <div class="col-xl-2 card">
                <div class="card-body">
                    <h2>Tile 1</h2>
                </div>
            </div>  

            <div class="col-xl-2 card">
                <div class="card-body">
                    <h2>Tile 2</h2>
                </div>
            </div>  
        </div>
    </div>

How can I fix this? What am I missing here?

Answer 1

Tried it on this fiddle https://jsfiddle.net/pba8h4dk/ .

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-9 card">
      <div class="card-body">
        <h2>Profile picture</h2>
        <img src="https://via.placeholder.com/900x500.jpg" alt="" class="img-fluid rounded">
      </div>
    </div>

    <div class="col-lg-3 card">
      <div class="card-body">
        <h2>Description</h2>
      </div>
    </div>  
  </div>
</div>

Removing card-columns class did the trick (and obviously making sure your screen is sm/md/lg/)