Creating a Foundation-style Block Grid in Bootstrap 3?

Question

In Zurb Foundation 3+, they have a CSS construct of a \"block grid\" which is an unordered list where you can specify the number of items in a row.

Here\'s their docs on

Answer 1

Quick and dirty LESS file to generate block grids (1 to @grid-columns) in Bootstrap 3. Still need to make responsive classes (like block-grid-sm-3 block-grid-lg-6).

// Bootstrap variables and mixisn
@import "bootstrap/less/variables.less";
@import "bootstrap/less/mixins.less";

.block-grid () {
  padding: 0;

  & > li {
    display: block;
    float: left;
    list-style: none;
  }
}

.make-block-grid (@columns, @spacing: @grid-gutter-width) when (@columns > 0) {
  .block-grid-@{columns} {
    &:extend(.clearfix all);
    .block-grid();

    margin: 0 (-@spacing / 2);

    > li {
      width: 100% / @columns;
      padding: 0 (@spacing / 2) @spacing;

      &:nth-of-type(1n) { clear: none; }
      &:nth-of-type(@{columns}n+1) { clear: both; }
    }
  }

  .make-block-grid(@columns - 1)
}

.make-block-grid(@grid-columns);