Using Foundation’s Block Grid Mixin within the Bootstrap CSS Framework (Updated)

Here’s an adaption of Zurb Foundation’s handy Block Grid Mixin adapted to the LESS preprocessor in order to use it within Bootstrap.

Update
I’ve added a mixin that supports a shorthand syntax that enables you to simply create a block grid writing something like .make-block-grid(1,2,4,8);

// # Block Grid Mixin
//
// Technique adapted from Foundation 5 for Bootstrap 3
//
// # Example Usage
//
// To produce a grid of 2 items per row on an extra-small screen, 3 items
// on a small screen, 4 items on a medium screen and 6 items per row on large screen:
//
// ul.gallery {
//   .make-block-grid-container();
//   > li {
//     .make-xs-block-grid(2);
//     .make-sm-block-grid(3);
//     .make-md-block-grid(4);
//     .make-lg-block-grid(6);
//   }
// }

// Or, in a quicker way with the shorthand syntax:
//   ul.gallery {
//     .make-block-grid(2,3,4,6)
//   }

//Mixins for Block Grids
.make-block-grid-container (@spacing: @grid-gutter-width) {
  list-style: none;
  padding: 0;
  margin-left: (@spacing / -2);
  margin-right: (@spacing / -2);
  &:extend(.clearfix all);
  > * {
    margin-bottom: @spacing;
  }
  > li {
    &:before {
      content: none !important;
    }
  }
}
.make-xs-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  float: left;
  width: percentage(1 / @blocks);
  &:nth-of-type(1n) { clear: none; }
  &:nth-of-type(@{blocks}n+1) { clear: both; }
}
.make-sm-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage(1 / @blocks);
    &:nth-of-type(1n) { clear: none; }
    &:nth-of-type(@{blocks}n+1) { clear: both; }
  }
}
.make-md-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage(1 / @blocks);
    &:nth-of-type(1n) { clear: none; }
    &:nth-of-type(@{blocks}n+1) { clear: both; }
  }
}
.make-lg-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage(1 / @blocks);
    &:nth-of-type(1n) { clear: none; }
    &:nth-of-type(@{blocks}n+1) { clear: both; }
  }
}

// Make one mixin for all sizes so we don't have to call 4 mixins every time we use block grids
.make-block-grid (@cols-xs, @cols-sm, @cols-md, @cols-lg) {
  .make-block-grid-container();
  >li {
    .make-xs-block-grid(@cols-xs);
    .make-sm-block-grid(@cols-sm);
    .make-md-block-grid(@cols-md);
    .make-lg-block-grid(@cols-lg);
  }
}