flex grid.

grid.scss

$grid-gutter: 20px !default;
$grid-gutter-small: $grid-gutter !default;
$grid-gutter-medium: $grid-gutter-small !default;
$grid-gutter-large: $grid-gutter-medium !default;

$colslist: 1, 2, 3, 4, 5, 6, 12;

// Media Queries
$screen-small-min: 567px;
$screen-medium-min: 768px;
$screen-large-min: 1200px;

$screen-small-max: $screen-medium-min - 1px;
$screen-medium-max: $screen-large-min - 1px;

$screen: "only screen" !default;
$small-up: "#{$screen} and (min-width:#{$screen-small-min})" !default;
$small-only: "#{$screen} and (min-width:#{$screen-small-min}) and (max-width:#{$screen-small-max})" !default;

$medium-up: "#{$screen} and (min-width:#{$screen-medium-min})" !default;
$medium-only: "#{$screen} and (min-width:#{$screen-medium-min}) and (max-width:#{$screen-medium-max})" !default;

$large-up: "#{$screen} and (min-width:#{$screen-large-min})" !default;
$large-only: "#{$screen} and (min-width:#{$screen-large-min})" !default;



@mixin grid-clearfix() {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}


@mixin grid-unit($num) {
    @for $i from 1 through $num {
        &_#{$i}of#{$num} {
            width: percentage($i/$num);
            max-width: percentage($i/$num);
            min-width: percentage($i/$num);
            flex-basis: percentage($i/$num);
        }

        &_offset_#{$i}of#{$num} {
            margin-left: percentage($i/$num);
        }

        .c-grid_reverse &_offset_#{$i}of#{$num} {
            margin-left: 0;
            margin-right: percentage($i/$num);
        }

    }
}
.c-grid {
    clear: both;
    margin-left: -1 * $grid-gutter / 2;
    margin-right: -1 * $grid-gutter / 2;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;


    &__u {

        @include grid-clearfix();

        box-sizing: border-box;

        width: 100%;
        position: relative;
        overflow: hidden;
        flex-grow: 0;
        flex-shrink: 0;

        padding: 0 $grid-gutter / 2;

        @each $cols in $colslist {
            @include grid-unit($cols);
        }

        @media #{$small-up} {

            &_small {
                @each $cols in $colslist {
                    @include grid-unit($cols);
                }
            }
        }

        @media #{$medium-up} {

            &_medium {
                @each $cols in $colslist {
                    @include grid-unit($cols);
                }
            }
        }

        @media #{$large-up} {

            &_large {
                @each $cols in $colslist {
                    @include grid-unit($cols);
                }
            }
        }
    }


    &_center {
        align-items: center;
    }
    &_bottom {
        align-items: flex-end;
    }

    &_reverse {
        flex-direction: row-reverse;
    }

    &_collapse {
        margin-left: 0;
        margin-right: 0;
    }

    &_collapse > &__u {
        padding: 0;
    }


}