Grid

A simple grid that uses the zg-col class and a zg-col-[num] qualifier wrapped in a div with the class .zen-row.

4
8

Code example

<div class="zen-row">
    <div class="zg-col zg-col-4 secondary-bg">4</div>
    <div class="zg-col zg-col-8 secondary-bg">8</div>
</div>

All Rows

1
11
2
10
3
9
4
8
5
7
6
6
12

Marginless Grid

Use the class .zen-marginless-grid to remove the gutter between columns in the grid.

1
11
2
10
3
9
4
8
5
7
6
6
12

Code example

<div class="zen-row zen-marginless-grid">
    <div class="zg-col zg-col-2 secondary-bg">2</div>
    <div class="zg-col zg-col-10 secondary-bg">10</div>
</div>

No margins Grid

Use the class .zen-no-margins.zen-marginless-grid to remove the vertical space between cols as well as the horizontal space.

1
11
2
10
3
9
4
8
5
7
6
6
12

Code example

<div class="zen-row zen-marginless-grid zen-no-margins">
    <div class="zg-col zg-col-2 secondary-bg">2</div>
    <div class="zg-col zg-col-10 secondary-bg">10</div>
</div>

Grid with zen-padding class

4
8

Code example <div class="zen-row"> <div class="zg-col zg-col-4 secondary-bg zen-padding">4</div> <div class="zg-col zg-col-8 secondary-bg zen-padding">8</div> </div>

Grid with zen-padding-sml class

8
4

Code example <div class="zen-row"> <div class="zg-col zg-col-4 secondary-bg zen-padding-sml">4</div> <div class="zg-col zg-col-8 secondary-bg zen-padding-sml">8</div> </div>

Common grid names

Or if you would prefer to use common grid names use any of the following classes.

  • .one-sixth (.zg-col-2)
  • .one-quarter (.zg-col-3)
  • .one-third (.zg-col-4)
  • .one-half (.zg-col-6)
  • .two-thirds (.zg-col-8)
  • .three-quarters (.zg-col-9)
  • .one-whole (.zg-col-12)

Push and Pull classes

You can also use the following classes to push or pull a column across the page.

Pushed 4
Pulled 4

Code example

<div class="zen-row">
    <div class="zg-col zg-col-4 zen-push zen-push-4 secondary-bg">Pushed 4</div>
    <div class="zg-col zg-col-2 zen-pull zen-pull-4 secondary-bg">Pulled 4</div>
</div>

Pad Push and Pad Pull

Use the pad-push and pad-pull classes to apply a left or right padding to the column.

Pad Pushed 3
Pad Pushed 2

Code example

<div class="zen-row">
    <div class="zg-col zg-col-6 zen-push zen-pad-push-3 secondary-bg">Pad Pushed 3</div>
    <div class="zg-col zg-col-6 zen-push zen-pad-push-2 secondary-bg">Pad Pushed 2</div>
</div>

Stacked

Use the stacked classes to stack columns on specific devices. The following classes will only work properly if the tablet or phone width is greater than the grid collapse width. If the device is below the width of the grid collapse variable then these classes will have no effect.

  • .stack-phones
  • .stack-tablets

No Change classes

These classes work the opposite of the stack classes above. If you need to maintain the column width for a specific row on screens smaller than the grid collapse variable then use the following classes:

  • .no-change-phones
  • .no-change-tablets