Fork me on GitHub

Grid

Required files

SCSS files required: _objects.grid.scss

Grid system

This grid system uses flexbox.

The grid file objects.grid.scss includes 12 column sizes at small, medium and large breakpoints, and the same for offsets.

Grid gutters

The grid includes 20px gutters as default but can be changed with the modifying classes available.

To remove all gutters (vertical, horizontal gutters or both): .grid--v-gutter-none, .grid--h-gutter-none, .grid--gutter-none.

For small gutters (15px) (vertical, horizontal gutters or both): .grid--v-gutter-sm, .grid--h-gutter-sm, .grid--gutter-sm.

For extra small gutters (10px) (vertical, horizontal gutters or both): .grid--v-gutter-xs, .grid--h-gutter-xs, .grid--gutter-xs.

Grid responsive

The container requires the class .grid and each grid column requires the class .grid__col which is full width by default.

Classes can then be added starting with .grid__col- plus the amount of columns eg. .grid__col for full width and .grid__col-6 for half width.

The column widths can be modified at each breakpoint. For example the following classes can all be added to one grid column and the width of the column will change at all the breakpoints: grid__col grid__col-sm-3 grid__col-md-6 grid__col-lg-7

The following grid example uses the default grid column class at 12 column width (full width) and then applies one more to each at the medium breakpoint. Resulting that all columns will be full width at mobile size and then various column widths at the medium breakpoint.

<div class="grid">
    <div class="grid__col">
        <div>12</div>
    </div>

    <div class="grid__col grid__col-md-1">
        <div>1</div>
    </div>
    <div class="grid__col grid__col-md-11">
        <div>11</div>
    </div>

    <div class="grid__col grid__col-md-2">
        <div>2</div>
    </div>
    <div class="grid__col grid__col-md-10">
        <div>10</div>
    </div>

    <div class="grid__col grid__col-md-3">
        <div>3</div>
    </div>
    <div class="grid__col grid__col-md-9">
        <div>9</div>
    </div>

    <div class="grid__col grid__col-md-4">
        <div>4</div>
    </div>
    <div class="grid__col grid__col-md-8">
        <div>8</div>
    </div>

    <div class="grid__col grid__col-md-5">
        <div>5</div>
    </div>
    <div class="grid__col grid__col-md-7">
        <div>7</div>
    </div>

    <div class="grid__col grid__col-md-6">
        <div>6</div>
    </div>
    <div class="grid__col grid__col-md-6">
        <div>6</div>
    </div>
</div>
12
1
11
2
10
3
9
4
8
5
7
6
6

Grid offsets

Offset classes can be applied in the same way as grid column classes, but with 'offset' in the class, plus the amount of columns and then the breakpoint.

For example the following classes can all be added to one grid column and the width of the offset will change at all the breakpoints: .grid__col-offset-3 .grid__col-offset-sm-5 .grid__col-offset-md-8 .grid__col-offset-lg-10

<div class="grid">
    <div class="grid__col">
        <div class="grid__col-inner">
            <div>12</div>
        </div>
    </div>

    <div class="grid__col grid__col-md-11 grid__col-offset-md-1">
        <div>11</div>
    </div>

    <div class="grid__col grid__col-md-10 grid__col-offset-md-2">
        <div>10</div>
    </div>

    <div class="grid__col grid__col-md-9 grid__col-offset-md-3">
        <div>9</div>
    </div>

    <div class="grid__col grid__col-md-8 grid__col-offset-md-4">
        <div>8</div>
    </div>

    <div class="grid__col grid__col-md-7 grid__col-offset-md-5">
        <div>7</div>
    </div>

    <div class="grid__col grid__col-md-6 grid__col-offset-md-6">
        <div>6</div>
    </div>
</div>
12
11
10
9
8
7
6

Grid nested

Grids can be easily nested and they will maintain the gutter spacing as seen in the example below.

<div class="grid">
    <div class="grid__col">
        <div>12</div>
    </div>

    <div class="grid__col grid__col-md-1">
        <div>1</div>
    </div>
    <div class="grid__col grid__col-md-11">
        <div class="grid">
            <div class="grid__col grid__col-md-6">
                <div>Nested 6</div>
            </div>
            <div class="grid__col grid__col-md-6">
                <div>Nested 6</div>
            </div>
        </div>
    </div>

    <div class="grid__col grid__col-md-2">
        <div>2</div>
    </div>
    <div class="grid__col grid__col-md-10">
        <div>10</div>
    </div>

    <div class="grid__col grid__col-md-3">
        <div>3</div>
    </div>
    <div class="grid__col grid__col-md-9">
        <div class="grid">
            <div class="grid__col grid__col-md-4">
                <div>Nested 4</div>
            </div>
            <div class="grid__col grid__col-md-8">
                <div>Nested 8</div>
            </div>
        </div>
    </div>
</div>
12
1
Nested 6
Nested 6
2
10
3
Nested 4
Nested 8

Grid modifying helpers

To reverse the grid apply the modifying class .grid--reverse.