The grid includes two components

A row
Columns

Resize your browser window to observe the column behavior

News

Breaking news

Top Story

Here are today's top stories

<section class="row">
  <aside class="col-third">
    <p>Sidebar</p>
  </aside>
  <main class="col-twothirds">
    <p>Main Pane</p>
  </main>
</section>

<section class="application">
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main class="mainpane">
    <p>Main Pane</p>
  </main>
</section>

.application {
  @include row();
}
.sidebar {
  @include column('third');
}
.mainpane {
  @include column('twothirds');
}

The wrapper is optional. This creates a fixed width wrapper for the grid elements. The fixed width automatically resizes based on screen width.

For more about wrappers, see the example on fixed, fluid, and fixed fluid layouts in Layout and CSS

The row is a container for column elements.

The column is a measured container that occupies up to 12 column widths.

<div class="wrapper">
  ...
</div>

<div class="wrapper">
  ...
</div>

.wrapper {
  @include wrapper();
}

Use Shortcuts

Columns can be expressed by a number or one of three English words These are passed into the column() mixin.

These are not just for convenience, they automatically set breakpoints to change column widths on various screen sizes.

@include column('third');
@include column('twothirds');
@include column('half');

.col-third
.col-twothirds
.col-half

Use numbers

Passing in numbers, choose a column width from 1-12:

.newsfeed {
  @include column(2);
}
.article {
  @include column(10);
}

<div class="newsfeed col-2">
  ...
</div>
<div class="article col-10">
  ...
</div>

More examples

3 columns

6 columns

3 columns

6 columns

3 columns

9 columns

3 columns

3 columns, 6 column left

6 columns

9 columns, 3 column left

4 columns

4 columns, 4 column left

4 columns

4 columns, 4 column left

6 columns

12 columns

Offsets

Offsets allow you to add column-measured space to the side of a column.

six columns with six column left

...
<div class="col-left-6 col-6">
  Six columns
</div>

...
<div class="reminder">
  Six columns
</div>

.reminder {
  @include column(6, 6);
}

10 columns with 2 column left

3 columns

6 columns with 3 column left

4 columns with 4 column left

Shortcuts

Offsets can also use semantic shortcuts.

One third with two-third left

In the above example, the column and the left will revert to 1/2 width on tablet. On mobile, the left offset will disappear and the column will be full-width.

<div class="col-third col-left-twothirds">
  ...
</div>

<div class="blurb">
  ...
</div>

.blurb {
  @include column('third', $left: 'twothirds');
}

Nesting

half

third

When nesting, be sure to include a new row in the parent column.

<div class="row">
  <div class="sidebar">
    half
    <div class="options">
      <div class="terms">
        half
      </div>
      <div class="definitions">
        half
      </div>
    </div>
  </div>
  <div class="main">
    <div class="menu">
      <div class="new">third</div>
      <div class="updated">third</div>
      <div class="archived">third</div>
    </div>
  </div>
</div>

.row, .menu, .options {
  @import row();
}
.sidebar, .main, .terms, .definitions {
  @import column(6);
}
.new, .updated, .archived {
  @import column(4);
}

<div class="row">
  <div class="col-6">
    half
    <div class="row">
      <div class="col-6">
        half
      </div>
      <div class="col-6">
        half
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="row">
      <div class="col-4">third</div>
      <div class="col-4">third</div>
      <div class="col-4">third</div>
    </div>
  </div>
</div>

Responsive

Remember that using shortcut classes will automatically make your grid responsive. See "shortcuts" above.

Setting column rules via classes requires just a bit more syntax.

It is best practice to set the styles you expect on your smallest device first. This is what is known as designing "Mobile First"

For this, we'll use a regular grid class.

<div class="row">
  <section class="col-third">
    <p>Sidebar</p>
  </section>

  <section class="col-twothirds">
    <p>Main pane</p>
  </section>
</div>

<div class="row">
  <section class="col-12">
    <h1>About me</h1>
    <p>...</p>
  </section>
  <section class="col-12">
    <h1>My work</h1>
    <p>...</p>
  </section>
  <section class="col-12">
    <h1>Get in touch</h1>
    <p>...</p>
  </section>
</div>

In this example, we want these three sections to stack on top of one another. However, on tablet, it would be nice to have the first two in two columns. We can use the following syntax to create a mobile rule:

size is the viewport size and columns is a number 1-12.

Here are the sizes available with their corresponding widths:

Size name	Actual width
`xs`	360px
`sm`	480px
`rg`	768px
`md`	1024px
`lg`	1200px
`xl`	1400px

.col-[size]-[columns]

Now let's add a rule.

As you can see, we did not need to add a class to the last section because we want that to stay full width, at least for this breakpoint.

<div class="row">
  <section class="col-12 col-md-6">
    <h1>About me</h1>
    <p>...</p>
  </section>
  <section class="col-12 col-md-6">
    <h1>My work</h1>
    <p>...</p>
  </section>
  <section class="col-12">
    <h1>Get in touch</h1>
    <p>...</p>
  </section>
</div>

On desktop, we have enough room to split these up a little more. Let's make each one of them a third of the total width.

<div class="row">
  <section class="col-12 col-md-6 col-lg-4">
    <h1>About me</h1>
    <p>...</p>
  </section>
  <section class="col-12 col-md-6 col-lg-4">
    <h1>My work</h1>
    <p>...</p>
  </section>
  <section class="col-12 col-lg-4">
    <h1>Get in touch</h1>
    <p>...</p>
  </section>
</div>

For mobile lefts, we use the form:

.col-left-[size]-[columns]

If we wanted our "Get in touch" section above to half-sized and left by half on a medium-sized display, we could add this:

The left will automatically remove itself if a col-lg column definition is declared.

<section class="col-12 col-md-6 col-left-md-6 col-lg-4">
  <h1>Get in touch</h1>
  <p>...</p>
</section>

Mix your grid rules into media queries to make your own responsive rules.

It helps to use the breakpoints provided. Each returns a fixed width based on a common device.

Variable	Actual width
`$phone`	360px
`$phablet`	480px
`$tablet`	768px
`$tablet-landscape`	1024px
`$large-monitor`	1200px
`$xl-monitor`	1400px
`$xxl-monitor`	1600px

When using media queries, it's best practice to write your styles for the smallest device first, and write the exceptions as you go up. This is commonly referred to as Mobile First design.

Media Query Shortcuts

To make writing mobile-first media queries easy, we've included the gt (greater than) mixin.

.something {
  width: 100%;

  gt($phone) {
    width: 50%;
  }
}

// Is the same as

.something {
  width: 100%;

  @media screen and (min-width: 360px) {
    width: 50%;
  }
}

Here's how we might make some different column rules using these breakpoints:

<div class="about-me">
  ...
</div>
<div class="my-work">
  ...
</div>
<div class="getting-in-touch">
  ...
</div>

We want each of the above sections to occupy a third of the page on desktop.

Oh wait, we're designing this mobile first. Let's start with the phone. Three columns would be a little crowded, so let's just stack one on top of the other.

.about-me, .my-work, .getting-in-touch {
  @include column(12);
}

This looks good, but on a tablet in landscape position, the reading stride is a little wide. Let's split up the first two columns and leave the last one full.

.about-me, .my-work, .getting-in-touch {
  @include column(12);
}
@media screen and (min-width: $tablet-landscape) {
  .about-me, .my-work {
    @include column(6);
  }
}

Notice, we don't have to write anything for .getting-in-touch because we inherit its full-width from the phone's rule.

Now we're on desktop and we're ready to go into three column mode.

That should be all we need for a responsive grid.

.about-me, .my-work, .getting-in-touch {
  @include column(12);
}
@media screen and (min-width: $tablet-landscape) {
  .about-me, .my-work {
    @include column(6);
  }
}
@media screen and (min-width: $desktop) {
  .about-me, .my-work, .getting-in-touch {
    @include column(4);
  }
}