Using the Gridler Mixin

Gridler 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.

Lets go with this example html which will use gridlers default settings as defined in the sass config:

<div class="gridler-example">
    <div class="col"><p>Gridler</p></div>
    <div class="col"><p>Gridler</p></div>
    <div class="col"><p>Gridler</p></div>
    <div class="col"><p>Gridler</p></div>
    <div class="col"><p>Gridler</p></div>
    <div class="col"><p>Gridler</p></div>
    <div class="col"><p>Gridler</p></div>
    <div class="col"><p>Gridler</p></div>
</div>

Of course, include the mixin in your stylesheet:

.gridler-example {
    @include gridler;
}

This would yeild the following:

Gridler

Gridler

Gridler

Gridler

Gridler

Gridler

Gridler

Gridler

Customising Gridler

Whilst you can set the way gridler behaves globally in the _config-layout.scss file, you can also set these on the fly. This is useful if you need a number of differently configured grids within your project. Here is a fully loaded example:

.gridler-example-custom {
    @include gridler(
    "gridler-col",
    24px,
    6,
    3,
    2,
    $gridler-sm,
    $gridler-me,
    $gridler-lg,
    true,
    800px
    );
}
<div class="gridler-example-custom">
    <div class="gridler-col"><p>Gridler</p></div>
    <div class="gridler-col"><p>Gridler</p></div>
    <div class="gridler-col"><p>Gridler</p></div>
    <div class="gridler-col"><p>Gridler</p></div>
    <div class="gridler-col"><p>Gridler</p></div>
    <div class="gridler-col"><p>Gridler</p></div>
</div>

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-columns variable above the mixin and then set it back to match your site afterwards.

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.

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

This will set the total columns to 8, allowing you more flexibility within the gridler.

G

G

G

G

G

G

G

G

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.