A mixin to create a N * N css classes grid.

grid.less

.grid_column(@prefix; @index; @base) {
	@fullclass: ~'.grid-@{prefix}col@{index}';
	@{fullclass} { left: @base * @index; }
}
.grid_row(@prefix; @index; @base) {
	@fullclass: ~'.grid-@{prefix}row@{index}';
	@{fullclass} { top: @base * @index; }
}
.grid_width(@prefix; @index; @base) {
	@fullclass: ~'.grid-@{prefix}hspan@{index}';
	@{fullclass} { width: @base * @index; }
}
.grid_height(@prefix; @index; @base) {
	@fullclass: ~'.grid-@{prefix}vspan@{index}';
	@{fullclass} { height: @base * @index; }
}

.grid_all(@prefix; @index; @hBase; @vBase) when (@index > 0) {
	.grid_column(@prefix; @index; @hBase);
	.grid_row   (@prefix; @index; @vBase);
	.grid_width (@prefix; @index; @hBase);
	.grid_height(@prefix; @index; @vBase);
	.grid_all(@prefix; @index - 1; @hBase; @vBase);
}
.grid_first(@prefix; @count; @width; @height) {
	.grid_all(@prefix; @count; @width / @count; @height / @count);
}

.grid(@count; @width; @height; @prefix) {
	.grid_first('@{prefix}-'; @count; @width; @height);
}
.grid(@count; @width; @height) {
	.grid_first(''; @count; @width; @height);
}

output.css

/*

It divides available space into specified rows/columns and creates classes to locate the elements with position: absolute. Created classes are:

  .grid-col{N}
  .grid-row{N}
  .grid-hspan{N}
  .grid-vspan{N}

where {N} is the number of row/column the element must fill / where the element show be located

Optionally a last "prefix" argument can be passed, this will create more specific classes:

  .grid-{PREFIX}-col{N}
  .grid-{PREFIX}-row{N}
  .grid-{PREFIX}-hspan{N}
  .grid-{PREFIX}-vspan{N}

For example

  .grid(3; 750px; 600px);

Will generate this

*/

.grid-hspan3 {
  width: 150px;
}
.grid-vspan3 {
  height: 187.5px;
}
.grid-col2 {
  right: 100px;
}
.grid-row2 {
  top: 125px;
}
.grid-hspan2 {
  width: 100px;
}
.grid-vspan2 {
  height: 125px;
}
.grid-col1 {
  right: 50px;
}
.grid-row1 {
  top: 62.5px;
}
.grid-hspan1 {
  width: 50px;
}
.grid-vspan1 {
  height: 62.5px;
}