SCSS Grid System Named "GATES"

_grid.scss

/*
CROSS BROWSER GRID SYSTEM by Burak OZ

Usege: 
    <div id="grid" class="cell-12 cell-1200-6 cell-992-3 cell-768-3 cell-480-2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

    > .cell- <SIZE>
        This one is for all XL screens which are greater than $bp-desktop or unspecified breakpoint classes.

    > .cell- <BREAKPOINT> - <SIZE>
        For specific breakpoints.
*/

#grid > * {
    box-sizing: border-box;
    float: left;
}

// Max Grid Numbers
$max_grid_number    : 12;
$max_grid_number_sm : 6;


$map: ( 
    1200    : $max-grid-number,
    992     : $max-grid-number, 
    768     : $max_grid_number_sm, 
    480     : $max_grid_number_sm,
    360     : 2
);

@for $i from 1 through $max_grid_number {
    $equ: 100% / $i ;
    #grid.cell-#{ $i } > * {
       width: $equ;
    }
}

@each $key, $val in $map {
    @media all and (max-width: $key + px) {
        @for $i from 1 through $val {
            $equ: 100% / $i ;
            #grid.cell-#{ $key }-#{ $i } > * {
               width: $equ;
            }
        }
    }
}