JTLR
7/7/2014 - 10:14 AM

Mini grid mixin

Mini grid mixin

@mixin mini-grid($column-name, $breakpoints, $columns) {
  .#{$column-name} {
    float: left;
    width: 100%;
  }
  $counter: 1;
  @each $breakpoint in $breakpoints {
    $column-count: nth($columns, $counter);
    $column-width: unquote(100 / $column-count + '%');
    @media all and (min-width: $breakpoint) {
      .#{$column-name} {
      	width: $column-width;  
      }
    }
    $counter: $counter + 1;
  }
}

$breakpoints: 320px, 480px, 768px, 1024px, 1280px;
$columns: 2, 3, 4, 5, 6;
@include mini-grid(example, $breakpoints, $columns);