Skip to content

Instantly share code, notes, and snippets.

@rolandtoth
Last active January 27, 2017 08:34
Show Gist options
  • Save rolandtoth/e3b7cc9f1cdb36862292deeb82ee56ab to your computer and use it in GitHub Desktop.
Save rolandtoth/e3b7cc9f1cdb36862292deeb82ee56ab to your computer and use it in GitHub Desktop.
simplest-flexbox-grid _fg_grid() mixin
/* Usage
pass columns list or column number and optionally gutter and padding
columns list: 1 2 1 => 4 columns altogether:
col 1/4 (25%), then col 2/4 (50%) and finally 1/4 (25%)
@include _fg_grid(1 2 1);
@include _fg_grid(1 2, 32, 24);
@include _fg_grid(1 2, $gutter: 32, $padding: 24);
if a number is passed instead of a list the mixin is equivalent to _fg() mixin
*/
@mixin _fg_grid($colList, $gutter: $_fg_gutter, $padding: $_fg_padding) {
@if type-of($colList) == number { // call _fg() directly
@include _fg($colList, $gutter, $padding);
} @else if type-of($colList) == list and length($colList) > 1 {
$columnCount: 0;
@each $i in $colList { // count how many columns are altogether
$columnCount: $columnCount + $i;
}
@include _fg($columnCount, $gutter, $padding);
@for $i from 1 through length($colList) { // set child items widths using nth:child()
$c: nth($colList, $i);
& > :nth-child(#{$i}) {
@include _fg_width($c/$columnCount, $gutter);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment