Bootstrap 3 Grid: Overflowing columns behavior - css

Question

I'm currently using this layout:
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<!-- and on and on -->
</div>
The content in each column is variable in size, this causes a strange flow in the browser. Something like this.
As you can see, columns 4,5,6 are in a new "row". and columns 7 and 8 have skipped a whole column. These behaviors are not desireable, Instead I want the columns to flow like so.
In this situation every column hugs the column it's under. I haven't found a fix yet for this problem. I have looked into clearfix. and it does not seem to help the situation, as it just moves a column to a newline/row.

Answer 1

What you are looking for is often reffered as a Pinterest style grid.
HTML
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
CSS
* {
box-sizing: border-box;
font-size: 22px;
font-family: "Helvetica", sans-serif;
color: #333333;
}
.container {
background-color: #f2f2f2;
padding: 10px;
border: 2px solid #CCCCCC;
max-width: 900px;
margin: 0 auto;
height: 470px;
display: flex;
flex-flow: column wrap; /* Shorthand – you could use ‘flex-direction: column’ and ‘flex-wrap: wrap’ instead */
justify-content: flex-start;
align-items: flex-start;
}
.item {
background-color: orange;
height: 150px;
width: 31%;
margin: 1%;
padding: 10px;
}
.item:nth-child(2) {
background-color: pink;
height: 250px;
}
.item:nth-child(3) {
height: 190px;
}
.item:nth-child(4) {
background-color: aqua;
height: 220px;
}
Demo: https://codepen.io/michellebarker/pen/zvxpoG
Or this alternative: https://bootsnipp.com/snippets/featured/pinterest-like-responsive-grid. Or search for more examples