Generate masonry grid blocks with LESS mixin

grid.html

<!-- Sample HTML -->
<div class="grid">
  <div class="grid__item grid-w1 grid-h1"></div>
  <div class="grid__item grid-w1 grid-h2"></div>
  <div class="grid__item grid-w2 grid-h2"></div>
  <div class="grid__item grid-w4 grid-h3"></div>
</div>

grid.less

// Variables
@grid-block-size:   190px;
@grid-block-margin: 10px;

// Mixin to generate grid widths
.generate-width(@n, @i: 1) when (@i =< @n) {
  &.grid-w@{i} {
    width:  @grid-block-size * @i + (@grid-block-margin*(@i - 1));
  }
  .generate-width(@n, (@i + 1));
}
// Mixin to generate grid heights
.generate-height(@n, @i: 1) when (@i =< @n) {
  &.grid-h@{i} {
    height:  @grid-block-size * @i + (@grid-block-margin*(@i - 1));
  }
  .generate-height(@n, (@i + 1));
}

// Grid margin
.grid {
  margin: 10px;
}

// Grid item
.grid__item {
  float: left;
  height: @grid-block-size;
  margin-bottom: 10px;
  width: @grid-block-size;
  
  // Generate 5 height variants
  .generate-height(5);
  
  // Generate 5 width variants
  .generate-width(5);
}

output.css

.grid {
  margin: 10px;
}
.grid__item {
  float: left;
  height: 190px;
  margin-bottom: 10px;
  width: 190px;
}
.grid__item.grid-h1 {
  height: 190px;
}
.grid__item.grid-h2 {
  height: 390px;
}
.grid__item.grid-h3 {
  height: 590px;
}
.grid__item.grid-h4 {
  height: 790px;
}
.grid__item.grid-h5 {
  height: 990px;
}
.grid__item.grid-w1 {
  width: 190px;
}
.grid__item.grid-w2 {
  width: 390px;
}
.grid__item.grid-w3 {
  width: 590px;
}
.grid__item.grid-w4 {
  width: 790px;
}
.grid__item.grid-w5 {
  width: 990px;
}