Flexible Grid factory in Less

grid.less

/* Creates a grid with a margins on either side of all units. To do the left-margin style of grid, change the .unit definition, subtracting 1 from the number of columns. */

@context: 740px;
@col: 40px;
@gutter: 20px;

.unit(@cols) {
  @target: (@cols * @col) + (@cols * @gutter);
  width: 100% * (@target / @context);
}

.gutter() {
  @target: (@gutter/2);
  @margin: 100% * (@target/@context);
  margin-left: @margin;
  margin-right: @margin;
}

[class*="unit-"] {
  float: left;
  min-height: 1px;
  .gutter;
}

.grid-12 {
  .unit-1 {
    .unit(1);
  }
  .unit-2 {
    .unit(2);
  }
  .unit-3 {
    .unit(3);
  }
  .unit-4 {
    .unit(4);
  }
  .unit-5 {
    .unit(5);
  }
  .unit-6 {
    .unit(6);
  }
  .unit-7 {
    .unit(7);
  }
  .unit-8 {
    .unit(8);
  }
  .unit-9 {
    .unit(9);
  }
  .unit-10 {
    .unit(10);
  }
  .unit-11 {
    .unit(11);
  }
  .unit-12 {
    .unit(12);
  }
}