Grid Height Issue between divs?

Question

I have created div grid system with HTML and CSS using the float:left method.

It works fine, however whenever there is a variable height difference between two divs in the same row, the next div starts at the bottom most position just below the div that has the greatest height.

Here's the codepen: http://codepen.io/anon/pen/GJZWoX

CSS:

.parent{
  width:330px;
}

.red{
  float:left;
  width:150px;
  height:150px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:red;
}

.blue{
  float:left;
  width:150px;
  height:300px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:blue;
}

Is there a way to solve this error using just css? Any good answer would be appreciated.

This is what I'm looking for:

Thank you

Answer 1

Just CSS? With flexbox you could http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox

But I would opt for Javascript as a more robust (and slightly better browser support at the time of posting) approach.

via JQuery Masonry http://masonry.desandro.com/ (supported from IE9+)