Skip to content
Flexbox grid helpers for SCSS πŸ“
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
examples
.gitignore
.npmignore
README.md
griddle.scss
package-lock.json
package.json

README.md

Griddle

SASS Mixins for creating flex grids

npm Downloads per month

quote logo

Griddle provides the following mixins:

Waffle grid

This allows you to make a "waffle"-style grid, where every element has the same width and elements in every row have the same height. To use it, simply import griddle and apply the mixin to the container:

@import "griddle-sass";

.container {
    @include grid-waffle($cols: 4);
}

You can optionally pass $gutter-width and $gutter-height. It will default to 1em if you don't pass anything.

The above code will result in the following when the class is applied to a container with several divs inside:

quote example waffle

Class grid

A class grid lets you define several percentages, and will then generate classes for you that you can apply to whatever element you want. Do not that they still need to be within the container where you use the mixin. For every row, you will also need to mark the first and last element with first and last respectively.

SCSS:

.container {
    @include grid-classes("1/10", "1/5", "3/10", "1/3", "2/5", "1/2");
}

HTML:

<div class="container">
    <div class="1/2 first"></div>
    <div class="1/2 last"></div>

    <div class="1/3 first"></div>
    <div class="1/3"></div>
    <div class="1/3 last"></div>

    <div class="1/10 first"></div>
    <div class="1/5"></div>
    <div class="2/5"></div>
    <div class="3/10 last"></div>
</div>

This is what the result looks like:

quote example class

Template grid

Inspired directly by the grid template syntax, this lets you visually define zones for your grid. This is best when you know ahead of time exactly how many elements there will be and how they will be scaled in relation to each other.
No additional markup is needed except for the class on the conntainer.

.template-grid {
    @include grid-template(
        "    1/2     1/2    ",
        "1/3     1/3     1/3",
        "1/10 2/10 4/10 3/10",
        "   1/3     2/3     "
    );
}

This results in the following:

quote example template

Please check the examples to see everything in action!

You can’t perform that action at this time.