Simple Grid.less

// ## Grid

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * @gridColumns);

.columns(@columnSpan: 1) {
  float: left;
  margin: 0 @gridGutterWidth / 2;
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}

.container {
  .clearfix();
  margin: 0 auto;
  width: @siteWidth;

  // Show a grid when trying to debug alignment

  &.debug {
    background: url("images/grid-debug.png");
  }
}

.offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth + @gridGutterWidth) * @columnOffset + @gridGutterWidth / 2;
}

// # Griditude

@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;

.row {
  .clearfix();

  .span1  { .columns(1); }
  .span2  { .columns(2); }
  .span3  { .columns(3); }
  .span4  { .columns(4); }
  .span5  { .columns(5); }
  .span6  { .columns(6); }
  .span7  { .columns(7); }
  .span8  { .columns(8); }
  .span9  { .columns(9); }
  .span10 { .columns(10); }
  .span11 { .columns(11); }
  .span12 { .columns(12); }
  .span13 { .columns(13); }
  .span14 { .columns(14); }
  .span15 { .columns(15); }
  .span16 { .columns(16); }

  .offset1 { .offset(1); }
  .offset2 { .offset(2); }
  .offset3 { .offset(3); }
  .offset4 { .offset(4); }
  .offset5 { .offset(5); }
  .offset6 { .offset(6); }
  .offset7 { .offset(7); }
  .offset8 { .offset(8); }
  .offset9 { .offset(9); }
  .offset10 { .offset(10); }
  .offset11 { .offset(11); }
  .offset12 { .offset(12); }
  .offset13 { .offset(13); }
  .offset14 { .offset(14); }
  .offset15 { .offset(15); }
  .offset16 { .offset(16); }
}