Skip to content

Instantly share code, notes, and snippets.

@JTLR
Created July 7, 2014 10:14
Show Gist options
  • Save JTLR/e76cc1418846f7dbc3e2 to your computer and use it in GitHub Desktop.
Save JTLR/e76cc1418846f7dbc3e2 to your computer and use it in GitHub Desktop.
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment