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

Here is a responsive version gremo's answer:

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

    padding: 0;
    margin: 0 (-@spacing / 2);

    & > li {
      display: block;

      float: left;

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

      list-style: none;

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

  .make-block-grid(@class, @columns - 1);
}

.make-block-grid(xs);

@media (min-width: @screen-sm-min) {
  .make-block-grid(sm);
}

@media (min-width: @screen-md-min) {
  .make-block-grid(md);
}

@media (min-width: @screen-lg-min) {
  .make-block-grid(lg);
}