Using Griddler Mixin

Griddler makes it a doddle to layout an even grid of items, like products in a shop or thumbnails in a portfolio.

Suppose you were building an e-commerce store or a portfolio of artwork. You would probably need to layout the products or works in a grid of thumbnails. The Gridler mixin makes this childs play.

Let's go with this example html which will use Gridlers default settings as defined in the SASS config.

<div class="grid-gridler">
    <div class="col">G</div>
    <div class="col">G</div>
    <div class="col">G</div>
    <div class="col">G</div>
    <div class="col">G</div>
    <div class="col">G</div>
    <div class="col">G</div>
    <div class="col">G</div>
</div>
G
G
G
G
G
G
G
G

Custom Gridler

@include gridler(
  'gridler-col',
  48px,
  12,
  6,
  4,
  4%,
  0%,
  640px,
  960px,
  1140px,
  true,
  1140px
);

The above example shows how to override all possible options, but of course you can set just the ones you wish to change, You must do this in the order they appear above. The effect of these options is described below:

Option Description
"gridler-col" This is the element you wish to use for the individual columns.
8px This is the vertical space between the columns.
6 Columns to use at the small break-point.
3 Columns to use at the medium break-point.
2 Columns to use at the large break-point
$gridler-sm Break point to trigger the small columns. Accepts a variable or a px value.
$gridler-me Break point to trigger the medium columns. Accepts a variable or a px value.
$gridler-lg Break point to trigger the large columns. Accepts a variable or a px value.
'true' Center the container on the page or within its parent.
800px Maximum width the Gridler will grow too.

Changing the total columns

It's possible to change the total number of columns that the gridler will use, independent of the total columns for the site. To do this you just need to set the$total-columnsvariable above the mixin and then set it back to match your site afterwards.

$total-columns: 8;
.gridler-custom-total {
  @include gridler('gridler-col-total', 24px, 4, 2, 1);
}
$total-columns: 12;

If you don't set it back, from this point on all other mixins will use the new setting which might upset other parts of your layout.