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

Answer 4

This css works for me:

class*="block-grid-"] {
  display: block;
  padding: 0;
  margin: 0 -0.625rem;
  *zoom: 1; }
  [class*="block-grid-"]:before, [class*="block-grid-"]:after {
    content: " ";
    display: table; }
  [class*="block-grid-"]:after {
    clear: both; }
  [class*="block-grid-"] > li {
    display: inline;
    height: auto;
    float: left;
    padding: 0 0.625rem 1.25rem; }

@media only screen {
  .small-block-grid-1 > li {
    width: 100%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .small-block-grid-2 > li {
    width: 50%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .small-block-grid-3 > li {
    width: 33.33333%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .small-block-grid-4 > li {
    width: 25%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .small-block-grid-5 > li {
    width: 20%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .small-block-grid-6 > li {
    width: 16.66667%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .small-block-grid-7 > li {
    width: 14.28571%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .small-block-grid-8 > li {
    width: 12.5%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .small-block-grid-9 > li {
    width: 11.11111%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .small-block-grid-10 > li {
    width: 10%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .small-block-grid-11 > li {
    width: 9.09091%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .small-block-grid-12 > li {
    width: 8.33333%;
    padding: 0 0.625rem 1.25rem; }
    .small-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .small-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }
@media only screen and (min-width: 40.063em) {
  .medium-block-grid-1 > li {
    width: 100%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .medium-block-grid-2 > li {
    width: 50%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .medium-block-grid-3 > li {
    width: 33.33333%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .medium-block-grid-4 > li {
    width: 25%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .medium-block-grid-5 > li {
    width: 20%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .medium-block-grid-6 > li {
    width: 16.66667%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .medium-block-grid-7 > li {
    width: 14.28571%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .medium-block-grid-8 > li {
    width: 12.5%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .medium-block-grid-9 > li {
    width: 11.11111%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .medium-block-grid-10 > li {
    width: 10%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .medium-block-grid-11 > li {
    width: 9.09091%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .medium-block-grid-12 > li {
    width: 8.33333%;
    padding: 0 0.625rem 1.25rem; }
    .medium-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .medium-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }
@media only screen and (min-width: 64.063em) {
  .large-block-grid-1 > li {
    width: 100%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .large-block-grid-2 > li {
    width: 50%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .large-block-grid-3 > li {
    width: 33.33333%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .large-block-grid-4 > li {
    width: 25%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .large-block-grid-5 > li {
    width: 20%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .large-block-grid-6 > li {
    width: 16.66667%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .large-block-grid-7 > li {
    width: 14.28571%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .large-block-grid-8 > li {
    width: 12.5%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .large-block-grid-9 > li {
    width: 11.11111%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .large-block-grid-10 > li {
    width: 10%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .large-block-grid-11 > li {
    width: 9.09091%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .large-block-grid-12 > li {
    width: 8.33333%;
    padding: 0 0.625rem 1.25rem; }
    .large-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .large-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }

<ul class="small-block-grid-2 large-block-grid-4">
  <li><img src="../assets/img/examples/comet-th.jpg"></li>
  <li><img src="../assets/img/examples/launch-th.jpg"></li>
  <li><img src="../assets/img/examples/space-th.jpg"></li>
  <li><img src="../assets/img/examples/spacewalk-th.jpg"></li>
</ul>