Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Foundation 5's block grids for Bootstrap 3.
// # Block Grid
//
// Technique adapted from Foundation 5 for Bootstrap 3.0.3 to at least 3.3.1.
// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss
//
// # Example Usage
//
// To produce a grid of 2 items per row on an extra-small screen, and 3 items
// per row on a small screen:
//
// <div class="block-grid-xs-2 block-grid-sm-3">
// <div class="block-grid-item">
// ...
// </div>
// </div>
[class*="block-grid-"] {
display: block;
margin: -(@grid-gutter-width/2);
padding: 0;
.clearfix();
}
.block-grid-item {
display: inline;
margin: 0;
padding: (@grid-gutter-width/2);
height: auto;
float: left;
width: 100%;
list-style: none; // for those who like to use `li` elements as block-grid-items
}
.block-grid (@per-row) {
& > .block-grid-item {
width: (100%/@per-row);
@nth-equation: ~"@{per-row}n+1";
&:nth-of-type(n) { clear: none; }
&:nth-of-type(@{nth-equation}) { clear: both; }
}
}
// Recursive loop that produces rules for block grids of @per-row many items
// per row down to 1 many items per row.
.block-grids(@size, @per-row: @grid-columns) when (@per-row > 0) {
.block-grid-@{size}-@{per-row} { .block-grid(@per-row); }
.block-grids(@size, (@per-row - 1));
}
.block-grids(xs);
@media (min-width: @screen-sm-min) { .block-grids(sm) }
@media (min-width: @screen-md-min) { .block-grids(md) }
@media (min-width: @screen-lg-min) { .block-grids(lg) }
@Remo

This comment has been minimized.

Show comment Hide comment
@Remo

Remo Mar 3, 2014

This is pretty cool but it didn't work for me, had to change this:

@media (min-width: @screen-sm-min) { .block-grids(sm) }
@media (min-width: @screen-md-min) { .block-grids(md) }
@media (min-width: @screen-lg-min) { .block-grids(lg) }

to this

@media (min-width: @screen-sm) { .block-grids(sm) }
@media (min-width: @screen-md) { .block-grids(md) }
@media (min-width: @screen-lg) { .block-grids(lg) }

Remo commented Mar 3, 2014

This is pretty cool but it didn't work for me, had to change this:

@media (min-width: @screen-sm-min) { .block-grids(sm) }
@media (min-width: @screen-md-min) { .block-grids(md) }
@media (min-width: @screen-lg-min) { .block-grids(lg) }

to this

@media (min-width: @screen-sm) { .block-grids(sm) }
@media (min-width: @screen-md) { .block-grids(md) }
@media (min-width: @screen-lg) { .block-grids(lg) }
@Jursdotme

This comment has been minimized.

Show comment Hide comment
@Jursdotme

Jursdotme May 5, 2014

Thanks alot!
Made a SCSS version of it here:
https://gist.github.com/Jursdotme/67abe379d4a357233d3c

Thanks alot!
Made a SCSS version of it here:
https://gist.github.com/Jursdotme/67abe379d4a357233d3c

@dvmage

This comment has been minimized.

Show comment Hide comment
@dvmage

dvmage May 20, 2014

Sometimes we need a custom grid with more then 12 columns so to keep the things aligned I've made a small modification to your gist

Just replace

.block-grids(@size) {
    .block-grid-@{size}-1 { .block-grid(1); }
    .block-grid-@{size}-2 { .block-grid(2); }
    .block-grid-@{size}-3 { .block-grid(3); }
    .block-grid-@{size}-4 { .block-grid(4); }
    .block-grid-@{size}-5 { .block-grid(5); }
    .block-grid-@{size}-6 { .block-grid(6); }
    .block-grid-@{size}-7 { .block-grid(7); }
    .block-grid-@{size}-8 { .block-grid(8); }
    .block-grid-@{size}-9 { .block-grid(9); }
    .block-grid-@{size}-10 { .block-grid(10); }
    .block-grid-@{size}-11 { .block-grid(11); }
    .block-grid-@{size}-12 { .block-grid(12); }
}

with

.block-grids(@size, @index: @grid-columns) when (@index > 0) {
    .block-grid-@{size}-@{index} { .block-grid(@index); }
    .block-grids(@size,@index - 1);
}

dvmage commented May 20, 2014

Sometimes we need a custom grid with more then 12 columns so to keep the things aligned I've made a small modification to your gist

Just replace

.block-grids(@size) {
    .block-grid-@{size}-1 { .block-grid(1); }
    .block-grid-@{size}-2 { .block-grid(2); }
    .block-grid-@{size}-3 { .block-grid(3); }
    .block-grid-@{size}-4 { .block-grid(4); }
    .block-grid-@{size}-5 { .block-grid(5); }
    .block-grid-@{size}-6 { .block-grid(6); }
    .block-grid-@{size}-7 { .block-grid(7); }
    .block-grid-@{size}-8 { .block-grid(8); }
    .block-grid-@{size}-9 { .block-grid(9); }
    .block-grid-@{size}-10 { .block-grid(10); }
    .block-grid-@{size}-11 { .block-grid(11); }
    .block-grid-@{size}-12 { .block-grid(12); }
}

with

.block-grids(@size, @index: @grid-columns) when (@index > 0) {
    .block-grid-@{size}-@{index} { .block-grid(@index); }
    .block-grids(@size,@index - 1);
}
@nemke

This comment has been minimized.

Show comment Hide comment
@nemke

nemke Sep 3, 2014

Hey guys, for us not using preprocessors, are there any links with generated CSS?

nemke commented Sep 3, 2014

Hey guys, for us not using preprocessors, are there any links with generated CSS?

@iamandrewluca

This comment has been minimized.

Show comment Hide comment
@iamandrewluca

iamandrewluca Sep 17, 2014

@taydakov

This comment has been minimized.

Show comment Hide comment
@taydakov

taydakov Sep 30, 2014

Usage:

<div class="container">
  <div class="block-grid-lg-4 block-grid-md-3 block-grid-sm-2">
    <div class="block-grid-item">
      <h1>User 1</h1>
    </div>
    <div class="block-grid-item">
      <h1>User 2</h1>
    </div>
    <div class="block-grid-item">
      <h1>User 3</h1>
    </div>
    <div class="block-grid-item">
      <h1>User 4</h1>
    </div>
  </div>
</div>

Usage:

<div class="container">
  <div class="block-grid-lg-4 block-grid-md-3 block-grid-sm-2">
    <div class="block-grid-item">
      <h1>User 1</h1>
    </div>
    <div class="block-grid-item">
      <h1>User 2</h1>
    </div>
    <div class="block-grid-item">
      <h1>User 3</h1>
    </div>
    <div class="block-grid-item">
      <h1>User 4</h1>
    </div>
  </div>
</div>
@honucreative

This comment has been minimized.

Show comment Hide comment
@honucreative

honucreative Dec 2, 2014

Very cool, thank you.

In case it helps any one, here's the final code and usage I used:

// Block Grid
// Technique adapted from Foundation 5 for Bootstrap 3.
// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss

[class*="block-grid-"] {
  display: block;
  margin: -(@grid-gutter-width/2);
  padding: 0;
  .clearfix();
}

.block-grid-item {
  display: inline;
  margin: 0;
  padding: (@grid-gutter-width/2);
  height: auto;
  float: left;
  list-style: none;
}

.block-grid (@per-row) {
  & > .block-grid-item {
    width: (100%/@per-row);

    @nth-equation: ~"@{per-row}n+1";
    &:nth-of-type(n) { clear: none; }
    &:nth-of-type(@{nth-equation}) { clear: both; }
  }
}

.block-grids(@size, @index: @grid-columns) when (@index > 0) {
    .block-grid-@{size}-@{index} { .block-grid(@index); }
    .block-grids(@size,@index - 1);
}

@media (min-width: @screen-sm) { .block-grids(sm) }
@media (min-width: @screen-md) { .block-grids(md) }
@media (min-width: @screen-lg) { .block-grids(lg) }

Usage:

          <ul class="block-grid-lg-4 block-grid-md-3 block-grid-sm-2">
            <li class="block-grid-item">
              <h1>User 1</h1>
            </li>
            <li class="block-grid-item">
              <h1>User 2</h1>
            </li>
            <li class="block-grid-item">
              <h1>User 3</h1>
            </li>
            <li class="block-grid-item">
              <h1>User 4</h1>
            </li>
          </ul>

Very cool, thank you.

In case it helps any one, here's the final code and usage I used:

// Block Grid
// Technique adapted from Foundation 5 for Bootstrap 3.
// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss

[class*="block-grid-"] {
  display: block;
  margin: -(@grid-gutter-width/2);
  padding: 0;
  .clearfix();
}

.block-grid-item {
  display: inline;
  margin: 0;
  padding: (@grid-gutter-width/2);
  height: auto;
  float: left;
  list-style: none;
}

.block-grid (@per-row) {
  & > .block-grid-item {
    width: (100%/@per-row);

    @nth-equation: ~"@{per-row}n+1";
    &:nth-of-type(n) { clear: none; }
    &:nth-of-type(@{nth-equation}) { clear: both; }
  }
}

.block-grids(@size, @index: @grid-columns) when (@index > 0) {
    .block-grid-@{size}-@{index} { .block-grid(@index); }
    .block-grids(@size,@index - 1);
}

@media (min-width: @screen-sm) { .block-grids(sm) }
@media (min-width: @screen-md) { .block-grids(md) }
@media (min-width: @screen-lg) { .block-grids(lg) }

Usage:

          <ul class="block-grid-lg-4 block-grid-md-3 block-grid-sm-2">
            <li class="block-grid-item">
              <h1>User 1</h1>
            </li>
            <li class="block-grid-item">
              <h1>User 2</h1>
            </li>
            <li class="block-grid-item">
              <h1>User 3</h1>
            </li>
            <li class="block-grid-item">
              <h1>User 4</h1>
            </li>
          </ul>
@ChrisTM

This comment has been minimized.

Show comment Hide comment
@ChrisTM

ChrisTM Dec 6, 2014

@Remo: Thanks for pointing that out. I'm guessing you're using Bootstrap 3.0.0. It seems like @screen-sm-min was a variable added shortly after Bootstrap 3.0.0. @screen-sm is deprecated as of 3.0.1.

@corlletelab: Good point. I've taken your suggestion!

@taydakov: Thanks for sharing an example of usage. That's important info, so I've updated the Gist with an example.

Owner

ChrisTM commented Dec 6, 2014

@Remo: Thanks for pointing that out. I'm guessing you're using Bootstrap 3.0.0. It seems like @screen-sm-min was a variable added shortly after Bootstrap 3.0.0. @screen-sm is deprecated as of 3.0.1.

@corlletelab: Good point. I've taken your suggestion!

@taydakov: Thanks for sharing an example of usage. That's important info, so I've updated the Gist with an example.

@adrianpauly

This comment has been minimized.

Show comment Hide comment
@adrianpauly

adrianpauly Apr 13, 2015

In case this helps: If you're using the CSS version of Bootstrap but are incorporating your own styles in LESS and want to use this, these are Bootrstrap's default values for the variables needed.

@grid-columns: 12;
@grid-gutter-width: 30px;

@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;

In case this helps: If you're using the CSS version of Bootstrap but are incorporating your own styles in LESS and want to use this, these are Bootrstrap's default values for the variables needed.

@grid-columns: 12;
@grid-gutter-width: 30px;

@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;

@pyrabbit

This comment has been minimized.

Show comment Hide comment
@pyrabbit

pyrabbit Apr 15, 2015

How can we add space between these grid items without it breaking? I am trying margin-right: 20px; but that doesnt seem to be working in my favor

How can we add space between these grid items without it breaking? I am trying margin-right: 20px; but that doesnt seem to be working in my favor

@MichCest

This comment has been minimized.

Show comment Hide comment
@MichCest

MichCest May 28, 2015

This is exactly what I was looking for. Any idea how it could be updated to be used as a LESS mixin?

This is exactly what I was looking for. Any idea how it could be updated to be used as a LESS mixin?

@omeripek

This comment has been minimized.

Show comment Hide comment
@omeripek

omeripek Sep 12, 2015

For example using LESS to change font-size;

.myFontSize(@size) { font-size: ~"@{size}px"}

.myFontClass (@size) {
   (~".font@{size}") { .myFontSize(@size); }
}

//////////////////////////////////////////////////////

.loop (@index) when (@index >= 10) {
    .myFontClass (@index);
    .loop(@index - 1);
} 
.loop (@index) when (@index < 10) {}

Usage:

.title{
    margin-bottom:0.5em;
    .myFontSize(13);
}

Output CSS

.title {
  margin-bottom: 0.5em;
  font-size: 13px;
}

For example using LESS to change font-size;

.myFontSize(@size) { font-size: ~"@{size}px"}

.myFontClass (@size) {
   (~".font@{size}") { .myFontSize(@size); }
}

//////////////////////////////////////////////////////

.loop (@index) when (@index >= 10) {
    .myFontClass (@index);
    .loop(@index - 1);
} 
.loop (@index) when (@index < 10) {}

Usage:

.title{
    margin-bottom:0.5em;
    .myFontSize(13);
}

Output CSS

.title {
  margin-bottom: 0.5em;
  font-size: 13px;
}
@josleow

This comment has been minimized.

Show comment Hide comment
@josleow

josleow Nov 9, 2015

I tried this sass mixin but the li with thumbnails still has the padding at left and right for first child and last child. Is there any way for me to set padding-left and padding-right at 0 for first child and last child in grid?

josleow commented Nov 9, 2015

I tried this sass mixin but the li with thumbnails still has the padding at left and right for first child and last child. Is there any way for me to set padding-left and padding-right at 0 for first child and last child in grid?

@JohnnyTheTank

This comment has been minimized.

Show comment Hide comment
@jpcmf

This comment has been minimized.

Show comment Hide comment
@jpcmf

jpcmf Dec 14, 2015

Stylus Version

[class*="block-grid-"]
    display: block
    margin: -($grid-gutter-width / 2)
    padding: 0
    clearfix()

.block-grid-item
    display: inline
    margin: 0
    padding: ($grid-gutter-width / 2)
    height: auto
    float: left
    list-style: none

block-grid($per-row)
    & > .block-grid-item
        width: (100% / $per-row)

        $nth-equation : (#{$per-row}n) + "+" + 1
        &:nth-of-type(n)
            clear: none
        &:nth-of-type({$nth-equation})
            clear: both

block-grids($size)
    .block-grid-{$size}-1
        block-grid(1)
    .block-grid-{$size}-2
        block-grid(2)
    .block-grid-{$size}-3
        block-grid(3)
    .block-grid-{$size}-4
        block-grid(4)
    .block-grid-{$size}-5
        block-grid(5)
    .block-grid-{$size}-6
        block-grid(6)
    .block-grid-{$size}-7
        block-grid(7)
    .block-grid-{$size}-8
        block-grid(8)
    .block-grid-{$size}-9
        block-grid(9)
    .block-grid-{$size}-10
        block-grid(10)
    .block-grid-{$size}-11
        block-grid(11)
    .block-grid-{$size}-12
        block-grid(12)

block-grids(xs)
@media (min-width: $screen-sm-min)
    block-grids(sm)
@media (min-width: $screen-md-min)
    block-grids(md)
@media (min-width: $screen-lg-min)
    block-grids(lg)

jpcmf commented Dec 14, 2015

Stylus Version

[class*="block-grid-"]
    display: block
    margin: -($grid-gutter-width / 2)
    padding: 0
    clearfix()

.block-grid-item
    display: inline
    margin: 0
    padding: ($grid-gutter-width / 2)
    height: auto
    float: left
    list-style: none

block-grid($per-row)
    & > .block-grid-item
        width: (100% / $per-row)

        $nth-equation : (#{$per-row}n) + "+" + 1
        &:nth-of-type(n)
            clear: none
        &:nth-of-type({$nth-equation})
            clear: both

block-grids($size)
    .block-grid-{$size}-1
        block-grid(1)
    .block-grid-{$size}-2
        block-grid(2)
    .block-grid-{$size}-3
        block-grid(3)
    .block-grid-{$size}-4
        block-grid(4)
    .block-grid-{$size}-5
        block-grid(5)
    .block-grid-{$size}-6
        block-grid(6)
    .block-grid-{$size}-7
        block-grid(7)
    .block-grid-{$size}-8
        block-grid(8)
    .block-grid-{$size}-9
        block-grid(9)
    .block-grid-{$size}-10
        block-grid(10)
    .block-grid-{$size}-11
        block-grid(11)
    .block-grid-{$size}-12
        block-grid(12)

block-grids(xs)
@media (min-width: $screen-sm-min)
    block-grids(sm)
@media (min-width: $screen-md-min)
    block-grids(md)
@media (min-width: $screen-lg-min)
    block-grids(lg)
@lebbart

This comment has been minimized.

Show comment Hide comment
@lebbart

lebbart Feb 16, 2016

Thank you very much for this information! I really need something like that in bootstrap project now!

lebbart commented Feb 16, 2016

Thank you very much for this information! I really need something like that in bootstrap project now!

@rjpedrosa

This comment has been minimized.

Show comment Hide comment
@rjpedrosa

rjpedrosa Feb 16, 2016

Does it need to be inside a .row ? Thanks!

Does it need to be inside a .row ? Thanks!

@drumWatts

This comment has been minimized.

Show comment Hide comment
@drumWatts

drumWatts Mar 23, 2016

Nice! Thanks for sharing.

Nice! Thanks for sharing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment