Grid

Responsive
A responsive 12 column grid system.

Class Result
.rowparent element to build a grid
.col-1width: 8.333333%;
.col-2width: 16.666667%;
.col-3width: 25%;
.col-4width: 33.333333%;
.col-5width: 41.666667%;
.col-6width: 50%;
.col-7width: 58.333333%;
.col-8width: 66.666667%;
.col-9width: 75%;
.col-10width: 83.333333%;
.col-11width: 91.666667%;
.col-12width: 100%;

Usage

Grids work just like they do in Bootstrap, based on a 12 column grid. Make a row and give it columns. By default the grid holds it’s structure on every device. It has a default horizontal gutter between elements of 24px.

<div class="row">
  <div class="col-3">.col-3</div>
  <div class="col-4">.col-4</div>
  <div class="col-5">.col-5</div>
</div>
.col-3
.col-4
.col-5

Responsive

You can use the responsive lg modifier to make the grid snap back to vertical stacking on smaller devices.

<div class="row">
  <div class="col-lg-3">.col-3</div>
  <div class="col-lg-4">.col-4</div>
  <div class="col-lg-5">.col-5</div>
</div>

Gap

To customize horizontal and vertical gutters see the Gap Docs for more details. For example row gap-0 would remove the gap between cells. In the example below, the gap-12 adds a 48px gap between all cells. The default gap between cells is 24px.

<div class="row gap-12">
  <div class="col-3">.col-3</div>
  <div class="col-4">.col-4</div>
  <div class="col-5">.col-5</div>
</div>
.col-3
.col-4
.col-5

Compiled Example

Input

<div class="row">
  <div class="col-3">This is a 1/4 of the row</div>
  <div class="col-3">This is a 1/4 of the row</div>
  <div class="col-6">This is a 1/2 of the row</div>
</div>

Output

<table class="row" role="presentation" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 100%;" width="100%">
  <tbody>
    <tr>
      <td class="col-3" style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 30px; width: 25%; margin: 0;" align="left" valign="top">
        This is a 1/4 of the row
      </td>
      <td class="col-3" style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 30px; width: 25%; margin: 0;" align="left" valign="top">
        This is a 1/4 of the row
      </td>
      <td class="col-6" style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 30px; width: 50%; margin: 0;" align="left" valign="top">
        This is a 1/2 of the row
      </td>
    </tr>
  </tbody>
</table>
On this page