Grid

Basic Usage

The default grid only switches to columns above the desktop breakpoint $breakpoint-desktop. Start with a .container to limit the width of the page. The .container is optional if you wish to span the full width of the viewport. Wrap each row of columns with the .row class. Use the .col to float columns left, then add a .col-X class to control width. Make sure the total number of columns in a row adds up to 12 or less.

Note: nested divs are added for demonstration only.

.col .col-6
.col .col-6
.col .col-4
.col .col-4
.col .col-4
{% highlight html %}
.col .col-6
.col .col-6
.col .col-4
.col .col-4
.col .col-4
{% endhighlight %}

Nesting

To nest grids, add another .row container within a column.

.col .col-4
.col .col-8
.col .col-6
.col .col-6
{% highlight html %}
.col .col-4
.col .col-8
.col .col-6
.col .col-6
{% endhighlight %}

Offset

Use the .col-offset-X classes to add margin to the left of a column.

.col .col-4
.col .col-6 .col-offset-2
{% highlight html %}
.col .col-4
.col .col-6 .col-offset-2
{% endhighlight %}

Centered Columns

Use the .col-center in place of .col to center a column

.col-center .col-6
{% highlight html %}
.col-center .col-6
{% endhighlight %}

Reversed Ordering

Use the .col-right class in place of .col to reverse order of columns.

First
Second
{% highlight html %}
First
Second
{% endhighlight %}

Mobile Grid

Use the mobile grid classes to use the grid at all screen sizes.

.mobile-col .mobile-col-6
.mobile-col .mobile-col-6
{% highlight html %}
.mobile-col .mobile-col-6
.mobile-col .mobile-col-6
{% endhighlight %}

Combined Mobile and Desktop Grid

Use the mobile grid as a base, then add desktop grid width utilities to adjust the grid layout for desktop

Half width on mobile, 7 columns on desktop
Half width on mobile, 5 columns on desktop
{% highlight html %}
Half width on mobile, 7 columns on desktop
Half width on mobile, 5 columns on desktop
{% endhighlight %}

Mobile Only Rows

To split columns differently on mobile and desktop, use a .clearfix element with the .mobile-show state.

.mobile-col-6 .col-3
Resize the viewport to a small size to see how the mobile-show clearfix works.
.mobile-col-6 .col-3
.mobile-col-6 .col-3
.mobile-col-6 .col-3
{% highlight html %}
.mobile-col-6 .col-3
Resize the viewport to a small size to see how the mobile-show clearfix works.
.mobile-col-6 .col-3
.mobile-col-6 .col-3
.mobile-col-6 .col-3
{% endhighlight %}

Nested Mobile and Desktop Grid

A similar layout can also be acheived with nesting.

Nested mobile column
Nested mobile column
Nested mobile column
Nested mobile column
{% highlight html %}
Nested mobile column
Nested mobile column
Nested mobile column
Nested mobile column
{% endhighlight %}

Centered Containers

To aligned single centered columns with other grid elements, use the .container-col-X classes. These set a max-width based on 6, 8, and 10 columns.

.container-col-10
.container-col-8
.container-col-6
{% highlight html %}
.container-col-10
.container-col-8
.container-col-6
{% endhighlight %}