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 it.

There's no way I can see to do this in Bootstrap 3; there's only columns. I'd like to have the ability to have a repeated element (such as a LI) display easily as a responsive grid, where I can specify how many across by breakpoint, as in Foundation.

I figure I can roll my own, but wanted to see if anyone had suggestions or had come across this before.

Answer 1

I too wish this was feature in BS3. You'll have to create your own solution.

My typical workaround is just as Foundation does it, by using percentages to define width, the nth-child selector, and adjusting margins.

[class*="block-grid-"] {
    display: block;
    padding: 0;
    margin: 0 -0.55556rem;
}

[class*="block-grid-"] > li {
    display: block;
    height: auto;
    float: left;
    padding: 0 0.55556rem 1.11111rem;
}

.small-block-grid-3 > li {
    width: 33.33333%;
    list-style: none;
}

.small-block-grid-3 > li:nth-of-type(1n) {
    clear: none;
}

.small-block-grid-3 > li:nth-of-type(3n+1) {
    clear: both;
}

Answer 2

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);

Answer 3

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);
}