$cols: 12; // Number of columns to generate
$margin: 1%; // Margin between columns in ssgrid-margin

.ssgrid {
    @for $i from 1 through $cols {
        @for $j from 1 through $i {
            @if $i != $j {
                .col-#{$j}-#{$i} {
                    width: percentage($j/$i);
                }
            }
        }
    }
    @for $i from 1 through $cols {
        // Static Columns
        &.grid-x#{$i} > *:nth-child(#{$i}n) {
            margin-right: 0;
        }
        &.grid-x#{$i} > *:nth-child(#{$i}n+1) {
            margin-left: 0;
            clear: left;
        }
        &.grid-x#{$i} > * {
            width: percentage(1/$i);
        }
    }
}

.ssgrid-margin {
    > * {
        margin: auto $margin auto $margin;
    }
    @for $i from 1 through $cols {
        @for $j from 1 through $i {
            @if $i != $j {
                .col-#{$j}-#{$i} {
                    width: ((( 100% ) / $i * $j ) - ( $margin * 2 )) + ((( $margin * 2 )/ $i ) * $j );
                }
            }
        }
    }
    @for $i from 1 through $cols {
        // Static Columns
        &.grid-x#{$i} > *:nth-child(#{$i}n) {
            margin-right: 0;
        }
        &.grid-x#{$i} > *:nth-child(#{$i}n+1) {
            margin-left: 0;
			clear: left;
        }
        &.grid-x#{$i} > * {
            width: ((( 100% ) / $i * 1) - ( $margin * 2 )) + ((( $margin * 2 )/ $i ) * 1);
        }
    }
}

.ssgrid, .ssgrid-margin {
    width: 100%;
    &.debug {
        margin: 16px 0;
        > * {
            background: #497789;
            color: #060D31;
            padding: 16px;
        }
    }
    > * {
        position: relative;
        float: left;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        &:first-child {
            margin-left: 0;
        }
        &:last-child {
            margin-right: 0;
            float: right;
        }
    }
    img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

/**
$point: media query size in px
$cols: how many columsn should this breakpoint be - $full needs to be false
$type: if you're using ssgrid-margin set this to true, otherwise set it to false

@include ssgrid-min(800px, 4, true);  - Breakpoint 800px, with 4 columns, using ssgrid-margin
@include ssgrid-min(500px, 2, true);  - Breakpoint 500px, with 2 columns, using ssgrid-margin
@include ssgrid-min(250px, 1);  - Breakpoint 250px, with 1 columns, using ssgrid


Example Usage:

<div class="webccom-cta ssgrid-margin">
    <div class="col-1-6">1</div>
    <div class="col-1-6">2</div>
    <div class="col-1-6">3</div>
    <div class="col-1-6">4</div>
    <div class="col-1-6">5</div>
    <div class="col-1-6">6</div>
</div>

.webcom-cta {
    @include ssgrid-min(768px, 4, true);
    @include ssgrid-min(320px, 1, true);
}

*/

@mixin ssgrid-min($point, $cols: 0, $type: false) {
    @media (max-width: $point) {
        @if $cols == 1 {
            img {
                max-width: 100%;
                height: auto;
                display: block;
                margin: 0 auto;
            }
            > *[class*="col-"] {
                width: 100%;
                float: none;
                margin-right: 0 !important;
                margin-left: 0 !important;
            }
        }
        @if $cols != 0 {
            > *:nth-child(n) {
                margin-left: $margin;
                margin-right: $margin; 
            }
            > *:nth-child(#{$cols}n) {
                margin-left: $margin;
                margin-right: 0;
            }
            > *:nth-child(#{$cols}n+1) {
                margin-right:  $margin;
                margin-left: 0;
                /* clear: left; */
                float: left;
            }
            > *[class*="col-"] {
                @if $type {
                    width: ((( 100% ) / $cols * 1 ) - ( $margin * 2 )) + ((( $margin * 2 )/ $cols ) * 1 );
                    float: left;
                    clear: none;
                } @else {
                    width: percentage(1/$cols);
                    float: left;
                }
            }
        }
        @content;
    }
}