Popular posts

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