12-Column Responsive Grid

This site uses a 12-column responsive grid system to which all modules align.

Drag your browser window width to see how the grid flexes.

Grid columns can be changed at breakpoints: xs, sm, md, and lg.

1

2

3

4

6

12

Markup

<div class="container">
  <div class="row">
    <div class="col-1@sm">1</div>
    <div class="col-1@sm">1</div>
    <div class="col-1@sm">1</div>
    <div class="col-1@sm">1</div>
    <div class="col-1@sm">1</div>
    <div class="col-1@sm">1</div>
    <div class="col-1@sm">1</div>
    <div class="col-1@sm">1</div>
    <div class="col-1@sm">1</div>
    <div class="col-1@sm">1</div>
    <div class="col-1@sm">1</div>
    <div class="col-1@sm">1</div>
  </div>
  <div class="row">
    <div class="col-2@sm">2</div>
    <div class="col-2@sm">2</div>
    <div class="col-2@sm">2</div>
    <div class="col-2@sm">2</div>
    <div class="col-2@sm">2</div>
    <div class="col-2@sm">2</div>
  </div>
  <div class="row">
    <div class="col-3@sm">3</div>
    <div class="col-3@sm">3</div>
    <div class="col-3@sm">3</div>
    <div class="col-3@sm">3</div>
  </div>
  <div class="row">
    <div class="col-4@sm">4</div>
    <div class="col-4@sm">4</div>
    <div class="col-4@sm">4</div>
  </div>
  <div class="row">
    <div class="col-6@sm">6</div>
    <div class="col-6@sm">6</div>
  </div>
  <div class="row">
    <div class="col-12@sm">12</div>
  </div>
</div>

Mobile Grid

Unlike the tablet/desktop grid, the mobile grid is made up of 6 columns.

These are specified with the xs breakpoint in the class name.

col-4@xs col-4@sm

col-1@xs col-4@sm

col-3@xs col-2@sm

col-3@xs col-5@sm

col-6@xs col-5@sm

Markup

<div class="container">
  <div class="row">
    <div class="col-4@sm col-4@xs">col-4@sm col-4@xs</div>
    <div class="col-4@sm col-1@xs">col-4@sm col-1@xs</div>
    <div class="col-4@sm col-1@xs">col-4@sm col-1@xs</div>
  </div>
  <div class="row">
    <div class="col-2@sm col-3@xs">col-2@sm col-3@xs</div>
    <div class="col-5@sm col-3@xs">col-5@sm col-3@xs</div>
    <div class="col-5@sm col-6@xs">col-5@sm col-6@xs</div>
  </div>
</div>

Nested Grid

Nesting is accomplished by adding another element with the row class inside the column.

n - half

n - n - half

4

n - half

Markup

<div class="container">
  <div class="row">
    <div class="col-6@sm">
      <div class="row">
        <div class="col-6@sm">n - half</div>
        <div class="col-6@sm">
          <div class="row">
            <div class="col-6@sm">n - n - half</div>
            <div class="col-6@sm">n - n - half</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4@sm">4</div>
    <div class="col-2@sm">
      <div class="row">
        <div class="col-6@sm">n - half</div>
        <div class="col-6@sm">n - half</div>
      </div>
    </div>
  </div>
</div>

Push and Pull

Grid columns can be pushed and pulled to make them appear after/before another column even though the source order would make it before/after.

Note that the C – F example below doesn't work when C and D are different heights.

A

B

C

D

E

F

Markup

<div class="container">
  <div class="row">
    <div class="col-4@sm col-offset-1@sm col-push-7@sm">A</div>
    <div class="col-4@sm col-pull-5@sm">B</div>
  </div>
  <div class="row">
    <div class="col-6@sm col-6@xs col-push-6@sm">C</div>
    <div class="col-6@sm col-3@xs col-pull-6@sm">D</div>
    <div class="col-3@sm col-3@xs col-push-6@sm">E</div>
    <div class="col-6@sm col-6@xs col-pull-3@sm">F</div>
  </div>
</div>

Gutterless Grid

There is also a "gutterless" grid option, which stacks all columns right next to each other. Add .row--gutterless to any .row element, and will affect all screen sizes.

.row--gutterless:

col-3@sm

col-3@xs col-3@sm

col-6@sm

There are also layout-specific gutterless options: .row--gutterless@xs will only apply to mobile, and .row--gutterless@sm to tablet/desktop+

.row--gutterless@xs:

col-3@xs col-6@sm

.row--gutterless@sm:

col-3@xs col-6@sm

Markup

<div class="container">
  <div class="row row--gutterless">
    <div class="col-3@sm">3</div>
    <div class="col-3@sm">3</div>
    <div class="col-3@xs col-3@sm">col-3@xs col-3@sm</div>
    <div class="col-3@xs col-3@sm">col-3@xs col-3@sm</div>
  </div>
  <div class="row row--gutterless">
    <div class="col-6@sm">6</div>
    <div class="col-6@sm">6</div>
  </div>

  <div class="row row--gutterless@xs">
    <div class="col-3@xs col-6@sm">col-3@xs col-6@sm</div>
    <div class="col-3@xs col-6@sm">col-3@xs col-6@sm</div>
  </div>

  <div class="row row--gutterless@sm">
    <div class="col-3@xs col-6@sm">col-3@xs col-6@sm</div>
    <div class="col-3@xs col-6@sm">col-3@xs col-6@sm</div>
  </div>
</div>

Full-bleed

The .container element can be made full-bleed at xs by adding --full@xs. You still need to also include the base .container class. Because this class does not affect rows, you also need to remove the negative margins from by adding .row--gutterless@xs

container--full@xs row--gutterless@xs

Markup

<div class="container container--full@xs">
  <div class="row row--gutterless@xs">
    <div class="col-12@sm">container--full@xs row--gutterless@xs</div>
  </div>
</div>