BEM Sass grid component

_grid.scss

$grid-columns: 12 !default;
$grid-gutter: 10px !default;
$grid-gutter-half: $grid-gutter / 2;

.grid {
    /*@include breakpoint("tablet") {
        flex-direction: row;
    }*/
    display: flex;
    flex-direction: column;
    padding: 0 $grid-gutter-half;

    &--is-multiline {
        flex-wrap: wrap;
    }

}

.grid__column {
    flex: 1;
    margin: 0 $grid-gutter-half;

    @for $i from 1 through $grid-columns {
        $width: ($i / $grid-columns) * 100%;
        &--is-#{$i} {
            flex: initial;
            width: calc(#{$width} - #{$grid-gutter});
        }
    }

    &--is-narrow {
        flex: initial;
    }
}

grid.html

<!-- Each columns shares the same width -->
<div class="grid">
    <div class="grid__column">Each grid column has an equal width.</div>
    <div class="grid__column">Each grid column has an equal width.</div>
</div>

<!-- Multiline modifier wraps column onto a new row -->
<div class="grid grid--is-multiline">
    <!--
        We can also add a grid__column--is-{size} to change a columns size
        where {size} range from 1 through $grid-columns
    -->
    <div class="grid__column grid__column--is-6">50%</div>
    <div class="grid__column grid__column--is-6">50%</div>
    <div class="grid__column grid__column--is-6">50%</div>
</div>

<div class="grid">
    <div class="grid__column">
        Hello
    </div>
    <!-- .grid__column--is-narrow modifier takes up that much size it needs -->
    <div class="grid__column grid__column--is-narrow">
        Hello, hello, hello
    </div>
    <div class="grid__column">
        Hello
    </div>
</div>