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);