.create-grid-columns(@count, @name, @i: 1) when (@i <= @count) {
    @width: @i * 100% / @count;

    .col--@{name}-@{i} {
        width: @width;
    }
    .col--@{name}-offset-@{i} {
        margin-left: @width;
    }
    .create-grid-columns(@count, @name, (@i + 1));
}

.create-grid-column-float(@name) {
    [class*=' col--@{name}'],
    [class^='col--@{name}'] {
        .is-col();
    }

    .col--@{name}-no-offset {
        margin-left: 0;
    }
}

.create-grid-col(@width) {
    .is-col();
    width: @width * 100% / @grid-columns;
    margin: 0;
}

.create-grid-offset(@width) {
    margin-left: @width * 100% / @grid-columns;
}

.create-grid-gutter(@size, @size-name, @suffix: ~'') {
    .row--gutter-@{size-name}@{suffix} {
        > [class^="col--"],
        > [class*=" col--"] {
            padding-left: @size;
            padding-right: @size;

            &:last-child { padding-right: 0; }
            &:first-child { padding-left: 0; }
        }
    }
}

.is-col() {
    float: left;
    display: block;
    position: relative;
    /* prevent col from collapsing */
    min-height: 1px;
}