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
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
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.

Nested Grid

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

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.

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.

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