Appreciation for the abundance of information on stackoverflow pertaining to card-columns, I managed to configure tiled cols in a row. However, it seems like there is some sort of padding or margin causing an issue with Bootstrap's 12 columns per row "rule".
My goal is to achieve a masonry / pinterest tile layout where Tile 1 and Tile 2 columns are positioned below the description column while keeping the white text beneath the profile picture.
In the example below, setting the width of the description col to col-xl-4 causes it to be positioned under the profile picture col instead of next to it.
Furthermore, the description column ends up being 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 do I resolve this issue? What could be the missing piece here?