I'm having an issue with Bootstrap 4's card columns where the height of the shorter card ends up stretching to match the one beside it. This only occurs when I add the 'row' class to the parent div. If I remove the 'row' class, the cards stack on top of each other in Chrome (a known bug) and don't stack on smaller screens in Safari. Another problem is that applying 100% height to the cards causes them not to stretch, leaving a gap between cards.
I was hoping to achieve a Masonry look with the card columns, but they aren't behaving as expected. I suspect the flexbox properties on the 'row' class may be causing the issue, but I need them for the layout in two columns.
Below is my code. Any suggestions or solutions would be greatly appreciated!
.row {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
margin-right: 30px;
margin-left: 30px;
}
.card-columns .card {
width: 320px !important;
display: inline-block !important;
height: auto;
}
.card-columns {
-webkit-column-count: 2 !important;
-moz-column-count: 2 !important;
column-count: 2 !important;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-columns row">
<div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
<div class="my-3 p-3">
<h3 class="display-6">TITLE</h3>
<p class="lead-portfolio">Some text</p>
</div>
</div>
<div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE</h3>
<p class="lead-portfolio-dark">Some text</p>
</div>
</div>
</div>
</div>