Example of a dynamic responsive grid system.

grid.less

// DyRGS - dynamic responsive grid system
// @author: karsten.rieger@tritium-design.de

@gutter:                1.5625%; // ~= 10px gutter @ 320px width
@mobile-column-count:   4;
@tablet-column-count:   8;
@desktop-column-count:  12;
@mobile-selector:       m;
@tablet-selector:       t;
@desktop-selector:      d;

// mixin creates basic grid columns
// --------------------------------
// @columnType  - is one of [mobile, tablet, desktop]
// @i           - iterator variable used for column width / spreading
// @count       - the overall number of columns in one row, determined by @columnType
.generate-columns(@columnType, @i: 1, @count: "@{columnType}-column-count") when (@i <= @@count) {

  // determine css class prefix by column type
  // @locSel contains the concatenated string of type and suffix
  // @selector can be used to render the class name in concatenation with other strings
  .getColumnTypeClassName(@colType) {
    @locSel: "@{colType}-selector";
    @selector: @@locSel;
  }

  // mixin to calculate relative width of one column
  // -----------------------------------------------
  // @column-count  - the overall number of coulmns in one row
  // @spread        - the spreading of the cell across number of columns, i.e. the width in columns
  .calculateColumnWidth(@column-count, @spread) {
    @width: (((100 - (@gutter * (@column-count - 1))) / @column-count) * @spread + (@spread - 1) * @gutter);
    @singleColumnWidth: ((100 - (@gutter * (@column-count - 1))) / @column-count) ;
  }

  // resolve class name used for css selector by columnType (mobile, tablet or desktop)
  .getColumnTypeClassName(@columnType);

  // this will output the actual class definition
  .@{selector}-col-@{i} {
    .calculateColumnWidth(@@count, @i);
    width: @width
  }

  // mixin to create columns with offset
  // (the sum of column width and offset width is always <= 100%)
  // ------------------------------------------------------------
  // @w:      - column width
  // @push:   - left offset of column
  // @index:  - the number of columns to be pushed
  .generate-pushed-columns(@w, @push, @index:1) when ( (@i + @index) <= @@count ) {

    .@{selector}-col-@{i}-push-@{index} {
      width: @w;
      margin-left: (@push + @index * @gutter);
    }

    .generate-pushed-columns(@w, ((@index+1) * @singleColumnWidth), (@index+1));

  }

  // determine width of current column
  .calculateColumnWidth(@@count, @i);

  // create push columns for current column width
  .generate-pushed-columns(@width, @singleColumnWidth);

  // recursively call generator method until total number of columns is reached
  .generate-columns(@columnType, (@i + 1));
}

.row {
  display: block;
  width: 100%;
}

.row:before, .row:after {
  content: " ";
  display: table;
}
.row:after {
  clear: both;
}

.col {
  height: 1em;
  float: left;
  margin: 0 (@gutter) 0 0;
  border: 1px solid red;
}

.row .col:last-child {
  margin-right: 0;
}

.generate-columns(mobile);

@media (min-width: 720px) {
  .generate-columns(tablet);
}

@media (min-width: 1280px) {
  .generate-columns(desktop);
}

Creates a simple responsive grid system.

.m-col-1-push-1 {
    width: 23.828125%;
    margin-left: 25.390625%
}

.m-col-1-push-2 {
    width: 23.828125%;
    margin-left: 50.78125%
}

.m-col-1-push-3 {
    width: 23.828125%;
    margin-left: 76.171875%
}

.m-col-2 {
    width: 49.21875%
}

.m-col-2-push-1 {
    width: 49.21875%;
    margin-left: 25.390625%
}

.m-col-2-push-2 {
    width: 49.21875%;
    margin-left: 50.78125%
}

.m-col-3 {
    width: 74.609375%
}

.m-col-3-push-1 {
    width: 74.609375%;
    margin-left: 25.390625%
}

.m-col-4 {
    width: 100%
}

[...]
@media (min-width: 1280px) {
    .d-col-1 {
        width:6.90104167%
    }

    .d-col-1-push-1 {
        width: 6.90104167%;
        margin-left: 8.46354167%
    }
[...]