Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Foundation 5 style Block-Grid for Bootstrap 3 (SASS Version)
// Block Grid
// Technique adapted from Foundation 5 for Bootstrap 3.
// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss
// Original LESS Version by Christopher Mitchell (https://gist.github.com/ChrisTM)
// Converted to SCSS by Rasmus Jürs (https://github.com/Jursdotme)
[class*="block-grid-"] {
display: block;
margin: -($grid-gutter-width/2);
padding: 0;
@include clearfix();
}
.block-grid-item {
display: inline;
margin: 0;
padding: ($grid-gutter-width/2);
height: auto;
float: left;
list-style: none;
}
@mixin 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; }
}
}
@mixin block-grids($size) {
.block-grid-#{$size}-1 { @include block-grid(1); }
.block-grid-#{$size}-2 { @include block-grid(2); }
.block-grid-#{$size}-3 { @include block-grid(3); }
.block-grid-#{$size}-4 { @include block-grid(4); }
.block-grid-#{$size}-5 { @include block-grid(5); }
.block-grid-#{$size}-6 { @include block-grid(6); }
.block-grid-#{$size}-7 { @include block-grid(7); }
.block-grid-#{$size}-8 { @include block-grid(8); }
.block-grid-#{$size}-9 { @include block-grid(9); }
.block-grid-#{$size}-10 { @include block-grid(10); }
.block-grid-#{$size}-11 { @include block-grid(11); }
.block-grid-#{$size}-12 { @include block-grid(12); }
}
@include block-grids(xs);
@media (min-width: $screen-sm-min) { @include block-grids(sm) }
@media (min-width: $screen-md-min) { @include block-grids(md) }
@media (min-width: $screen-lg-min) { @include block-grids(lg) }
@marcushouse

This comment has been minimized.

Copy link

marcushouse commented May 14, 2014

May I suggest replacing the nth-equation with
$nth-equation: #{$per-row}n+'+'+1;

as it was compiling without the "+"

Old compile
.block-grid-xs-2 > .block-grid-item:nth-of-type(2n1)
with new line
.block-grid-xs-2 > .block-grid-item:nth-of-type(2n+1)

@Jursdotme

This comment has been minimized.

Copy link
Owner Author

Jursdotme commented Jun 18, 2014

@marcushouse

Thanks, this has been updated.

@vbashorun

This comment has been minimized.

Copy link

vbashorun commented Oct 30, 2014

Would it be too much trouble to post an example usage here? Tried it out and there were a few kinks. I want to make sure I'm actually using it right.

@CiaranGeorge

This comment has been minimized.

Copy link

CiaranGeorge commented Dec 1, 2014

heres an example:

<div class="container">

  <div class="block-grid-lg-4 block-grid-md-3 block-grid-sm-2 block-grid-xs-1">
    <img class="block-grid-item" src="...">
    <img class="block-grid-item" src="...">
    <img class="block-grid-item" src="...">
    <img class="block-grid-item" src="...">
    <img class="block-grid-item" src="...">
    <img class="block-grid-item" src="...">
  </div>
</div>
@nickberens360

This comment has been minimized.

Copy link

nickberens360 commented Jan 6, 2015

good stuff, thanks for this

@juukie

This comment has been minimized.

Copy link

juukie commented Mar 4, 2015

To support > 12 columns, I use this instead of the block-grids mixin:

@mixin block-grids($size, $columns: $grid-columns) {
  @for $i from 1 through $columns {
    .block-grid-#{$size}-#{$i}
      @include block-grid($i)
  }
}

In sass:

=block-grids($size, $columns: $grid-columns)
  @for $i from 1 through $columns
    .block-grid-#{$size}-#{$i}
      +block-grid($i)
@alexgomes09

This comment has been minimized.

Copy link

alexgomes09 commented Jul 4, 2015

Does not seem to be working - using bootstrap 3.3.5

Result
Image of Yaktocat

Markup output
Image of Yaktocat

CSS compiled
Image of Yaktocat

@djmtype

This comment has been minimized.

Copy link

djmtype commented Jul 30, 2015

It doesn't seem to work like it once did. Returning an error: error parsing interpolated value. Using Bootstrap 3.3.5 with Sass 3.4.14.

@tnormington

This comment has been minimized.

Copy link

tnormington commented Aug 27, 2015

Is this no longer working with the current version of Bootstrap?

@realart

This comment has been minimized.

Copy link

realart commented Sep 5, 2015

When I had a DIV with pagination below block grid container, and I used "text-center" text align class, my pagination links sometimes aligned too much to the right and not in center.

This was because the negative margin of last row block grid items somehow collapsed into the pagination div and affected text align calculation. Despite the fact that block grid container has "clearfix".

To get rid of this problem, I had to wrap blockgrid into another div and give it clearfix class as well.

@mheywood90

This comment has been minimized.

Copy link

mheywood90 commented Sep 24, 2015

This was not working with the current version of bootstrap and seemed to be a similar error read here:
alexwolfe/Buttons#64

wrapping the $nth-equation in parentheses seemed to fix the issue for me:
$nth-equation: (#{$per-row}n) + '+' +1;

@JohnnyTheTank

This comment has been minimized.

@jpcmf

This comment has been minimized.

Copy link

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)
@johnkodes

This comment has been minimized.

Copy link

johnkodes commented Dec 22, 2015

Libsass will not compile the CSS correctly.

Use $nth-equation : (#{$per-row}n) + '+' + 1 instead of $nth-equation: #{$per-row}n+'+'+1; as mheywood90 pointed out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.