// grid property
%grid-property {
    position: relative;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}



// make all-size grid (default options)
@each $item, $grid-type in $grid-type-list {
    @for $i from 1 through $grid-columns {
        .#{$item}-#{$i} { @extend %grid-property; }
    }
}


// make grid function
@mixin make-grid($item){
    @for $i from 1 through $grid-columns {
        .#{$item}-#{$i} {
            max-width: (100% / $grid-columns) * $i;
            flex:0 0 (100% / $grid-columns) * $i;
        } 
    }
}


// make scren-size grid
@each $item, $screen-size in $grid-type-list {
    @if ($item!="xs") {
        @media (min-width: $screen-size) {
            @include make-grid($item);
        }
    }
    @else{
        @include make-grid($item);
    }
}




// no media queries
@for $i from 1 through $grid-columns {
    .#{$grid-name}-#{$i} {
        max-width: (100% / $grid-columns) * $i;
        flex:0 0 (100% / $grid-columns) * $i;
    }
}


// formulation grid columns
@each $item, $screen-size in $grid-type-list {
     @media (min-width: $screen-size) {
        @for $i from 1 through $grid-columns{
            .#{$grid-name}s-#{$i}-#{$item} {
                .#{$grid-name}{ 
                    max-width: (100% / $i);
                    flex:0 0 (100% / $i);
                }
            }
        }
     }
}

// + extend

.row[class*="#{$grid-name}s-"]{
    .#{$grid-name}{
        @extend %grid-property;
    }
}