Ultimate grid mixin

gist:6526989.less

// Group class for clearing floats

.group {
    &:before,
    &:after {
        content: " ";
        display: table;
    }

    &:after {
        clear: both;
    }

    *zoom: 1;
}


// Grid mixin

.create-grid(@cols: 1, @padding: 0) { 
    width: auto;
    margin-right: -@padding;

    .item {
        float: left;
        width: (100% / @cols);

        padding-right: @padding;
    }
}

// Sample usage

.grid {
    .group;

    &.grid-1 {
        .create-grid(1);
    }

    &.grid-2 {
        .create-grid(2, 2%);
    }

    &.grid-3 {
        .create-grid(3, 2%);
    }

    &.grid-4 {
        .create-grid(4, 3%);
    }
}

🚢 Looking good.