Layouts: Just Another Grid System (JAGS)

One column

.grid .grid_col--1 .grid_box

    <div class="grid">
      <div class="grid_col--1">
        <div class="grid_box">.grid .grid_col--1 .grid_box</div>
      </div>
    </div><!-- .grid -->

Two columns

Default
Reversed
With borders

Default

.grid--2 .grid_col--1 .grid_box

.grid--2 .grid_col--2 .grid_box

    <div class="grid--2">
      <div class="grid_col--1 grid_col--fl-50">
        <div class="grid_box">.grid--2 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--2 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

Reversed

.grid--2 .grid_col--1 .grid_box

.grid--2 .grid_col--2 .grid_box

    <div class="grid--2">
      <div class="grid_col--1 grid_col--fr-50">
        <div class="grid_box">.grid--2 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--2 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

With borders

.grid--bdr .grid_col--1 .grid_box

.grid--bdr .grid_col--2 .grid_box

    <div class="grid--2 grid--bdr">
      <div class="grid_col--1 grid_col--fl-50">
        <div class="grid_box">.grid--bdr .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--bdr .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

Default

.grid--3 .grid_col--1 .grid_box

.grid--3 .grid_col--2 .grid_box

.grid--3 .grid_col--3 .grid_box

    <div class="grid--3">
      <div class="grid_col--1 grid_col--fl-33">
        <div class="grid_box">.grid--3 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--fl-33">
        <div class="grid_box">.grid--3 .grid_col--2 .grid_box</div>
      </div>
      <div class="grid_col--3 grid_col--oh">
        <div class="grid_box">.grid--3 .grid_col--3 .grid_box</div>
      </div>
    </div><!-- .grid -->

Reversed

.grid--3 .grid_col--1 .grid_box

.grid--3 .grid_col--2 .grid_box

.grid--3 .grid_col--3 .grid_box

    <div class="grid--3">
      <div class="grid_col--1 grid_col--fr-33">
        <div class="grid_box">.grid--3 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--fr-33">
        <div class="grid_box">.grid--3 .grid_col--2 .grid_box</div>
      </div>
      <div class="grid_col--3 grid_col--oh">
        <div class="grid_box">.grid--3 .grid_col--3 .grid_box</div>
      </div>
    </div><!-- .grid -->

With borders

.grid--bdr .grid_col--1 .grid_box

.grid--bdr .grid_col--2 .grid_box

.grid--bdr .grid_col--3 .grid_box

    <div class="grid--3 grid--bdr">
      <div class="grid_col--1 grid_col--fl-33">
        <div class="grid_box">.grid--bdr .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--fl-33">
        <div class="grid_box">.grid--bdr .grid_col--2 .grid_box</div>
      </div>
      <div class="grid_col--3 grid_col--oh">
        <div class="grid_box">.grid--bdr .grid_col--3 .grid_box</div>
      </div>
    </div><!-- .grid -->

Four columns

Default
Reversed
With borders

Default

.grid--4 .grid_col--1 .grid_box

.grid--4 .grid_col--2 .grid_box

.grid--4 .grid_col--3 .grid_box

.grid--4 .grid_col--4 .grid_box

    <div class="grid--4">
      <div class="grid_col--1 grid_col--fl-25">
        <div class="grid_box">.grid--4 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--fl-25">
        <div class="grid_box">.grid--4 .grid_col--2 .grid_box</div>
      </div>
      <div class="grid_col--3 grid_col--fl-25">
        <div class="grid_box">.grid--4 .grid_col--3 .grid_box</div>
      </div>
      <div class="grid_col--4 grid_col--oh">
        <div class="grid_box">.grid--4 .grid_col--4 .grid_box</div>
      </div>
    </div><!-- .grid -->

Reversed

.grid--4 .grid_col--1 .grid_box

.grid--4 .grid_col--2 .grid_box

.grid--4 .grid_col--3 .grid_box

.grid--4 .grid_col--4 .grid_box

    <div class="grid--4">
      <div class="grid_col--1 grid_col--fr-25">
        <div class="grid_box">.grid--4 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--fr-25">
        <div class="grid_box">.grid--4 .grid_col--2 .grid_box</div>
      </div>
      <div class="grid_col--3 grid_col--fr-25">
        <div class="grid_box">.grid--4 .grid_col--3 .grid_box</div>
      </div>
      <div class="grid_col--4 grid_col--oh">
        <div class="grid_box">.grid--4 .grid_col--4 .grid_box</div>
      </div>
    </div><!-- .grid -->

With borders

.grid--bdr .grid_col--1 .grid_box

.grid--bdr .grid_col--2 .grid_box

.grid--bdr .grid_col--3 .grid_box

.grid--bdr .grid_col--4 .grid_box

    <div class="grid--4 grid--bdr">
      <div class="grid_col--1 grid_col--fl-25">
        <div class="grid_box">.grid--bdr .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--fl-25">
        <div class="grid_box">.grid--bdr .grid_col--2 .grid_box</div>
      </div>
      <div class="grid_col--3 grid_col--fl-25">
        <div class="grid_box">.grid--bdr .grid_col--3 .grid_box</div>
      </div>
      <div class="grid_col--4 grid_col--oh">
        <div class="grid_box">.grid--bdr .grid_col--4 .grid_box</div>
      </div>
    </div><!-- .grid -->

Six columns

Default
Reversed
With borders

Default

.grid--6 .grid_col--1 .grid_box

.grid--6 .grid_col--2 .grid_box

.grid--6 .grid_col--3 .grid_box

.grid--6 .grid_col--4 .grid_box

.grid--6 .grid_col--5 .grid_box

.grid--6 .grid_col--6 .grid_box

    <div class="grid--6">
      <div class="grid_col--1 grid_col--fl-16">
        <div class="grid_box">.grid--6 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--fl-16">
        <div class="grid_box">.grid--6 .grid_col--2 .grid_box</div>
      </div>
      <div class="grid_col--3 grid_col--fl-16">
        <div class="grid_box">.grid--6 .grid_col--3 .grid_box</div>
      </div>
      <div class="grid_col--4 grid_col--fl-16">
        <div class="grid_box">.grid--6 .grid_col--4 .grid_box</div>
      </div>
      <div class="grid_col--5 grid_col--fl-16">
        <div class="grid_box">.grid--6 .grid_col--5 .grid_box</div>
      </div>
      <div class="grid_col--6 grid_col--oh">
        <div class="grid_box">.grid--6 .grid_col--6 .grid_box</div>
      </div>
    </div><!-- .grid -->

Reversed

.grid--6 .grid_col--1 .grid_box

.grid--6 .grid_col--2 .grid_box

.grid--6 .grid_col--3 .grid_box

.grid--6 .grid_col--4 .grid_box

.grid--6 .grid_col--5 .grid_box

.grid--6 .grid_col--6 .grid_box

    <div class="grid--6">
      <div class="grid_col--1 grid_col--fr-16">
        <div class="grid_box">.grid--6 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--fr-16">
        <div class="grid_box">.grid--6 .grid_col--2 .grid_box</div>
      </div>
      <div class="grid_col--3 grid_col--fr-16">
        <div class="grid_box">.grid--6 .grid_col--3 .grid_box</div>
      </div>
      <div class="grid_col--4 grid_col--fr-16">
        <div class="grid_box">.grid--6 .grid_col--4 .grid_box</div>
      </div>
      <div class="grid_col--5 grid_col--fr-16">
        <div class="grid_box">.grid--6 .grid_col--5 .grid_box</div>
      </div>
      <div class="grid_col--6 grid_col--oh">
        <div class="grid_box">.grid--6 .grid_col--6 .grid_box</div>
      </div>
    </div><!-- .grid -->

With borders

.grid--bdr .grid_col--1 .grid_box

.grid--bdr .grid_col--2 .grid_box

.grid--bdr .grid_col--3 .grid_box

.grid--bdr .grid_col--4 .grid_box

.grid--bdr .grid_col--5 .grid_box

.grid--bdr .grid_col--6 .grid_box

    <div class="grid--6 grid--bdr">
      <div class="grid_col--1 grid_col--fl-16">
        <div class="grid_box">.grid--bdr .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--fl-16">
        <div class="grid_box">.grid--bdr .grid_col--2 .grid_box</div>
      </div>
      <div class="grid_col--3 grid_col--fl-16">
        <div class="grid_box">.grid--bdr .grid_col--3 .grid_box</div>
      </div>
      <div class="grid_col--4 grid_col--fl-16">
        <div class="grid_box">.grid--bdr .grid_col--4 .grid_box</div>
      </div>
      <div class="grid_col--5 grid_col--fl-16">
        <div class="grid_box">.grid--bdr .grid_col--5 .grid_box</div>
      </div>
      <div class="grid_col--6 grid_col--oh">
        <div class="grid_box">.grid--bdr .grid_col--6 .grid_box</div>
      </div>
    </div><!-- .grid -->

66/33

Default
Reversed
With borders

Default

.grid--66 .grid_col--1 .grid_box

.grid--66 .grid_col--2 .grid_box

    <div class="grid--66">
      <div class="grid_col--1 grid_col--fl-66">
        <div class="grid_box">.grid--66 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--66 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

Reversed

.grid--66 .grid_col--1 .grid_box

.grid--66 .grid_col--2 .grid_box

    <div class="grid--66">
      <div class="grid_col--1 grid_col--fr-66">
        <div class="grid_box">.grid--66 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--66 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

With borders

.grid--66 .grid_col--1 .grid_box

.grid--66 .grid_col--2 .grid_box

    <div class="grid--66 grid--bdr">
      <div class="grid_col--1 grid_col--fl-66">
        <div class="grid_box">.grid--66 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--66 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

33/66

Default
Reversed
With borders

Default

.grid--33 .grid_col--1 .grid_box

.grid--33 .grid_col--2 .grid_box

    <div class="grid--33">
      <div class="grid_col--1 grid_col--fl-33">
        <div class="grid_box">.grid--33 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--33 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

Reversed

.grid--33 .grid_col--1 .grid_box

.grid--33 .grid_col--2 .grid_box

    <div class="grid--33">
      <div class="grid_col--1 grid_col--fr-33">
        <div class="grid_box">.grid--33 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--33 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

With borders

.grid--33 .grid_col--1 .grid_box

.grid--33 .grid_col--2 .grid_box

    <div class="grid--33 grid--bdr">
      <div class="grid_col--1 grid_col--fl-33">
        <div class="grid_box">.grid--33 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--33 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

75/25

Default
Reversed
With borders

Default

.grid--75 .grid_col--1 .grid_box

.grid--75 .grid_col--2 .grid_box

    <div class="grid--75">
      <div class="grid_col--1 grid_col--fl-75">
        <div class="grid_box">.grid--75 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--75 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

Reversed

.grid--75 .grid_col--1 .grid_box

.grid--75 .grid_col--2 .grid_box

    <div class="grid--75">
      <div class="grid_col--1 grid_col--fr-75">
        <div class="grid_box">.grid--75 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--75 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

With borders

.grid--75 .grid_col--1 .grid_box

.grid--75 .grid_col--2 .grid_box

    <div class="grid--75">
      <div class="grid_col--1 grid_col--fl-75">
        <div class="grid_box">.grid--75 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--75 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

25/75

Default
Reversed
With borders

Default

.grid--25 .grid_col--1 .grid_box

.grid--25 .grid_col--2 .grid_box

    <div class="grid--25">
      <div class="grid_col--1 grid_col--fl-25">
        <div class="grid_box">.grid--25 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--25 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

Reversed

.grid--25 .grid_col--1 .grid_box

.grid--25 .grid_col--2 .grid_box

    <div class="grid--25">
      <div class="grid_col--1 grid_col--fr-25">
        <div class="grid_box">.grid--25 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--25 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->

With borders

.grid--25 .grid_col--1 .grid_box

.grid--25 .grid_col--2 .grid_box

    <div class="grid--25">
      <div class="grid_col--1 grid_col--fl-25">
        <div class="grid_box">.grid--25 .grid_col--1 .grid_box</div>
      </div>
      <div class="grid_col--2 grid_col--oh">
        <div class="grid_box">.grid--25 .grid_col--2 .grid_box</div>
      </div>
    </div><!-- .grid -->