Card-columns Embed Instragram Posts : Difference Between Chrome and other browsers

why not use row and col? Wrap the col-sm-6 class inside the row class. If you need to display 3 items in a row, then use col-sm-4.

<div class="row card-columns">
    <div class="col-sm-6 card p-4" style="border:none;">
        ...
    </div>
    <div class="col-sm-6 card p-4" style="border:none;">
        ...
    </div>
</div>

Demo link: https://codepen.io/sudheer-ranga/pen/bGVWwez

There's definitely something wrong with CSS columns in latest Chrome. At a glance, it's related to having an <iframe> inside a child of a columns-count parent.

While waiting on a fix, the only decent way of meeting the requirement ("display posts instagram (from top to bottom and left to right) with masonry effect") seems to be actually using masonry:

https://jsfiddle.net/websiter/oup2dkh5/

Notes:

• changed .card-columns to .masonry-cards (so that columns-count no longer applies).
• added a tiny function to init masonry and another one to refresh layout after instagram posts are transformed.
• traded .p-4 on cards for .my-2 with gutter: 24 in masonry options.
  Also added mx-auto, forced container to 100% and fitWidth: true on masonry to center the cards in available space (otherwise they're either left or right aligned, based on masonry's originLeft config option)
• added appropriate widths for cards on different responsiveness intervals

LGTM.