Grid

The grid system is a fluid system with a max width of 120rem (1200px), that shrinks with the viewport. The max width can be controlled by changing the --grid-maxWidth in the :root.

Much like other frameworks, wrap your content in a .container to center it on the page.


Flexible grid

A simple way to build flexible responsive columns:

Each column will have an equal width, in a row. There is no restriction on number of columns, but it is recommended not to add more than 12 columns in a row.

.col
.col
.col
.col
{% highlight html %}
.col
.col
.col
.col
{% endhighlight %}
Sized

You can also specify the size of the columns

Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use .col-4.

.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-4
.col-4
.col-4
.col-12
{% highlight html %}
.col-1
.col-4
.col-12
{% endhighlight %}
New Responsive grids:

We now have responsive grids that work based on device width.

.col-12.col-6-md.col-4-lg
.col-6.col-3-md.col-4-lg
.col-6.col-3-md.col-4-lg
.col.col-6-lg
.col.col-3-lg
.col.col-3-lg
{% highlight html %}
.col-12.col-6-md.col-4-lg
.col-6.col-3-md.col-4-lg
.col-6.col-3-md.col-4-lg
.col.col-6-lg
.col.col-3-lg
.col.col-3-lg
{% endhighlight %}
Mix-n-Match

You can use a combination of flexible and sized columns.

When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.

.col-2
.col-2
auto
.col-3
.col-10
auto
auto
auto
auto
auto
{% highlight html %}
.col-2
.col-2
auto
.col-3
.col-10
auto
auto
auto
auto
auto
{% endhighlight %}

Pro tip: Create equal-width columns that span multiple rows by inserting a .is-full-width where you want the columns to break to a new line. Here .is-full-width is one of the utility class.

Reverse Direction

Add .reverse to the .row to reverse the column direction.

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