.grid
    position: relative
    display: flex
    flex-wrap: wrap
    margin-left: multiple($gutter, -1)
    margin-right: multiple($gutter, -1)
    width: auto

    &[class*="is-tablet-"]
    &[class*="is-screen-"]
    &[class*="is-widescreen-"]
    &[class*="is-ultrawide-"]
        >.column:not([class*="is-"])
            flex: 0 0 100%
            width: 100%

    for $n in (1..$columns)
        &.is-{$n}
            >.column:not([class*="is-"])
                flex: 0 0 ($n / $columns * 100)%
                width: ($n / $columns * 100)%


    +tablet()
        for $n in (1..$columns)
            &.is-tablet-{$n}
                >.column:not([class*="is-"])
                    flex: 0 0 ($n / $columns * 100)%
                    width: ($n / $columns * 100)%

    +screen()
        for $n in (1..$columns)
            &.is-screen-{$n}
                >.column:not([class*="is-"])
                    flex: 0 0 ($n / $columns * 100)%
                    width: ($n / $columns * 100)%

    +widescreen()
        for $n in (1..$columns)
            &.is-widescreen-{$n}
                >.column:not([class*="is-"])
                    flex: 0 0 ($n / $columns * 100)%
                    width: ($n / $columns * 100)%

    +ultrawide()
        for $n in (1..$columns)
            &.is-ultrawide-{$n}
                >.column:not([class*="is-"])
                    flex: 0 0 ($n / $columns * 100)%
                    width: ($n / $columns * 100)%

    &.is-center
        justify-content: center

    &.is-end
        justify-content: flex-end

    &.is-start
        justify-content: flex-start

    &.is-middle
        align-items: center

    &.is-top
        align-items: flex-start

    &.is-bottom
        align-items: flex-end

    &.is-vertical
        flex-direction: column
        align-items: flex-start

    &.is-shrink
        >.column:not([class*="is-"])
            flex: 0 0 auto

    &.is-relaxed
        margin-left: 0
        margin-right: 0
        >.column
            padding: 0