grid.less

.alf-grid {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
}

.grid(@columns, @formatWidth, @columnWidth, @outerMargin) {
    @columnSpacing: (@formatWidth - ((@columnWidth * @columns) + (@outerMargin * 2))) / (@columns - 1);

    [class*=alf-col-] {
        position: absolute;
        top: 0;
        left: 0;
        width: @columnWidth;
    }

    .alf-region.alf-col-bottom,
    .alf-col-bottom {
        margin-bottom: @outerMargin !important;
    }

    .alf-region.alf-col-top,
    .alf-col-top {
        margin-top: @outerMargin !important;
    }

    .alf-col-no-margin.alf-col-1 {
        left: 0px;
    }

    .alf-col-no-margin {
        margin: 0 !important;
        width: @columnWidth + @outerMargin;
    }

    .grid-cols(@index) when (@index <= @columns) {
        .alf-cols-@{index} {
            width: (@columnWidth * @index) + (@outerMargin * 2) + (@columnSpacing * (@index - 1));
        }

        .grid-cols(@index + 1);
    }

    .grid-col(@index) when (@index <= @columns) {
        .alf-col-@{index} {
            left: @outerMargin + ((@index - 1) * @columnWidth) + ((@index - 1) * @columnSpacing);
        }

        .grid-col(@index + 1);
    }

    .grid-colspan(@index) when (@index < @columns) {
        @width: (@columnWidth * @index) + (@columnSpacing * (@index - 1));

        .alf-colspan-@{index} {
            width: @width;
        }

        .alf-colspan-@{index}.alf-col-no-margin {
            width: @width + @outerMargin;
        }

        .grid-colspan(@index + 1);
    }

    .grid-colspan(@index) when (@index = @columns) {
        @width: (@columnWidth * @index) + (@columnSpacing * (@index - 1));

        .alf-colspan-@{index} {
            width: @width;
        }

        .alf-colspan-@{index}.alf-col-no-margin {
            width: @width + (@outerMargin * 2);
        }

        .grid-colspan(@index + 1);
    }

    .grid-cols(1);
    .grid-colspan(1);
    .grid-col(1);
}