flex-grid and skinny breakpoint

flex-grid.scss

body * {
    box-sizing: border-box;
}

@mixin breakpoint($size) {
    @if type-of($size) == "string" {
        @media (min-width: map-get($breakpoints, $size)) {
            @content;
        }
    } @else {
        @media (min-width: #{$size}) {
            @content;
        }
    }
}

@mixin flex-grid($cols-or-fixed: 3, $gutter: 0%, $selector: "> div", $responsive: none) {
    // $cols-or-fixed: if unitless, assumed number of columns, otherwise fixed width.
    // $selector: the selector for the grid children.
    // $gutter: the gutter expect unitless 0, which causes an error in calc()
    // $responsive: takes a sass map of breakpoints and cols-or-fixed at that size

    @if ($gutter == 0) {
        $gutter: 0%;
    }

    $c: $cols-or-fixed;

    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: flex-start;

    #{$selector} {
        @if unitless($c) {
            // Assumed to be a number of columns
            // Width
            $width: calc((100% - ((#{$c} - 1) * #{$gutter})) / #{$c});
            flex: $width;
            max-width: $width;

            // Gutter
            margin-left: $gutter;

            &:nth-child(#{$c}n + 1) {
                margin-left: 0;
            }
        } @else {
            // Assumed to be fixed
            flex: $c 1;
            max-width: $c;
            margin-right: $gutter;
        }
    }

    // Responsive
    @if ($responsive != none) {
        $i: 0;
        @each $size, $new-c in $responsive {
            @include breakpoint($size) {
                #{$selector} {
                    @if unitless($new-c) {
                        // Width
                        $width: calc(
                             (100% - ((#{$new-c} - 1) * #{$gutter})) / #{$new-c}
                        );
                        flex: $width;
                        max-width: $width;

                        // Gutter
                        margin-left: $gutter;

                        // Undoing the prior nth-child margin setting
                        @if ($i == 0) {
                            &:nth-child(#{$c}n + 1) {
                                margin-left: $gutter;
                            }
                        } @else {
                            $last-c: nth(nth($responsive, $i), 2);
                            &:nth-child(#{$last-c}n + 1) {
                                margin-left: $gutter;
                            }
                        }

                        &:nth-child(#{$new-c}n + 1) {
                            margin-left: 0;
                        }
                    } @else {
                        flex: $new-c 1;
                        max-width: $new-c;
                        margin-right: $gutter;
                    }
                }
            }
            $i: $i + 1;
        }
    }
}