Grid

Scale

Style

Problem

You’ve got tons of content, each needing different sized vertical columns, and you don’t know how to quick and easily get it all done.

.small-3.columns

.large-6.columns

Solution

The awesome grid! The grid is built around 2 key elements: rows & columns.

rows create a max-width and contain the columns;
columns create the final structure.

Everything on your page that you don’t give a specific structural style to should live in a row.

How to Use

Using this framework is easy. Here’s how your code will look when you use a series of div tags to create vertical columns.

HTML

<div class="row">
  <div class="small-4 columns">...</div>
  <div class="small-4 columns">...</div>
  <div class="small-4 columns">...</div>
</div>
<div class="row">
  <div class="large-6 columns">...</div>
  <div class="large-6 columns">...</div>
</div>

SCSS

$row-width: rem-calc(1000);
$total-columns: 12;
$column-gutter: rem-calc(30);

Grid uneven

Here’s how to center an uneven number of items with the grid system.

.small-4.columns

.small-4.small-push-2.columns

.small-4.small-pull-2.columns

HTML

<div class="small-6 small-centered columns">
  <div class="row">
    <div class="small-4 columns">
      (...)
    </div>
    <div class="small-4 columns">
      (...)
    </div>
    <div class="small-4 columns">
      (...)
    </div>
  </div>
  <div class="row">
    <div class="small-4 columns">
      (...)
    </div>
    <div class="small-4 columns">
      (...)
    </div>
    <div class="small-4 columns">
      (...)
    </div>
  </div>
  <div class="row">
    <div class="small-4 small-push-2 columns">
      (...)
    </div>
    <div class="small-4 small-pull-2 columns">
      (...)
    </div>
  </div>
</div>

The push-/pull- are why we needed a base-12 grid: While the layout appears to have three columns, it really needs to nudge the last two a little ways in. The result is a symmetrical layout that doesn’t seem to have left anyone out.