Skip to content

Instantly share code, notes, and snippets.

@ChrisTM

ChrisTM/block-grid.less

Last active August 25, 2022 19:53
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save ChrisTM/8346916 to your computer and use it in GitHub Desktop.
Save ChrisTM/8346916 to your computer and use it in GitHub Desktop.
Download ZIP
Foundation 5's block grids for Bootstrap 3.
Raw
block-grid.less
// # 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) }
@iamandrewluca
Copy link

Hi nemke!
Here is compiled CSS
https://gist.github.com/thendrluca/e0383441f55b94e1ae0b

@zaaath
Copy link

zaaath commented 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>

@honucreative
Copy link

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
Copy link
Author

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
Copy link

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
Copy link

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
Copy link

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

Copy link

ghost commented 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;
}

@josleow
Copy link

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
Copy link

I've created a new repo: https://github.com/JohnnyTheTank/bootstrap-block-grid

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

@surnamename
Copy link

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

@rjpedrosa
Copy link

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

@drumWatts
Copy link

Nice! Thanks for sharing.

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