Improvement to Flex Boxes
Flex Boxes haven't solved all the problems. When Flex direction is row and we have divs with variable heights, there are gaps created in between multiple rows.

Less Code -
.grid-container{ //Wrapper's Class
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.grid{ //Grey boxes' Class
background: #aaa;
height: 100px;
width: 200px;
margin: 10px;
&:nth-child(1){
height: 200px;
}
&:nth-child(2){
height: 300px;
}
&:nth-child(3){
height: 100px;
}
&:nth-child(4){
height: 250px;
}
&:nth-child(5){
height: 200px;
}
&:nth-child(6){
height: 300px;
}
}
Codepen Link — codepen.io/anon/pen/mJXdxP