Masonry grid system

masonry-grid.scss

$breakpoints: (xs, sm, md, lg);
$calculation: '';

@each $breakpoint in $breakpoints {
	
  @for $i from 1 through 12 {
		
    $calculation: 0% + ($i * 100 / 12);
		
    .masonry-#{$breakpoint}-#{$i} {
			
      @if $breakpoint == 'xs' {
	width: $calculation;
      }
      @else if $breakpoint == 'sm' {
				
        @media screen and (min-width: 768px) {
	  width: $calculation;	
	}
      }
      @else if $breakpoint == 'md' {
				
	@media screen and (min-width: 992px) {
	  width: $calculation;	
	}
      }
      @else if $breakpoint == 'lg' {
				
	@media screen and (min-width: 1200px) {
	  width: $calculation;	
	}
      }
    }
  }
}