Github Project - Version 2.5.0
Created & Maintained by Gary Hepting

Grid System

A responsive and adaptive fractional grid system created by Gary Hepting

Component Usage Example 1 of 14

Grid Breakpoint Helpers

By default, grid columns collapse into rows at the $small-tablet breakpoint. The grid breakpoint helpers allow you to target the breakpoint that the grid structure should persist through.

Desktop Grid (default)

1/2
1/2
<div class="row">
  <div class="one half">1/2</div>
  <div class="one half">1/2</div>
</div>

Small-Tablet Grid

1/2
1/2
<div class="row">
  <div class="one half small-tablet">1/2</div>
  <div class="one half small-tablet">1/2</div>
</div>

Mobile Grid

1/2
1/2
<div class="row">
  <div class="one half mobile">1/2</div>
  <div class="one half mobile">1/2</div>
</div>


Grid Adapters

iPad Adapters

1/4 to 2-up
1/4 to 2-up
1/4 to 2-up
1/4 to 2-up
<div class="row">
  <div class="one fourth two-up-ipad">1/4 to 2-up</div>
  <div class="one fourth two-up-ipad">1/4 to 2-up</div>
  <div class="one fourth two-up-ipad">1/4 to 2-up</div>
  <div class="one fourth two-up-ipad">1/4 to 2-up</div>
</div>

Small-Tablet Adapters

1/4 to 2-up
1/4 to 2-up
1/4 to 2-up
1/4 to 2-up
<div class="row">
  <div class="one fourth two-up-small-tablet">1/4 to 2-up</div>
  <div class="one fourth two-up-small-tablet">1/4 to 2-up</div>
  <div class="one fourth two-up-small-tablet">1/4 to 2-up</div>
  <div class="one fourth two-up-small-tablet">1/4 to 2-up</div>
</div>

Mobile Adapters

1/4 to 2-up
1/4 to 2-up
1/4 to 2-up
1/4 to 2-up
<div class="row">
  <div class="one fourth small-tablet two-up-mobile">1/4 to 2-up</div>
  <div class="one fourth small-tablet two-up-mobile">1/4 to 2-up</div>
  <div class="one fourth small-tablet two-up-mobile">1/4 to 2-up</div>
  <div class="one fourth small-tablet two-up-mobile">1/4 to 2-up</div>
</div>

Combined Adapters

1/6 to 3-up to 2-up
1/6 to 3-up to 2-up
1/6 to 3-up to 2-up
1/6 to 3-up to 2-up
1/6 to 3-up to 2-up
1/6 to 3-up to 2-up
<div class="row">
  <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
  <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
  <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
  <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
  <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
  <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
</div>


Grid Fractions

Halves

1/2
1/2
<div class="row">
  <div class="one half">1/2</div>
  <div class="one half">1/2</div>
</div>

Thirds

1/3
2/3
<div class="row">
  <div class="one third">1/3</div>
  <div class="two thirds">2/3</div>
</div>

Fourths

1/4
3/4
<div class="row">
  <div class="one fourth">1/4</div>
  <div class="three fourths">3/4</div>
</div>

Fifths

1/5
3/5
1/5
<div class="row">
  <div class="one fifth">1/5</div>
  <div class="three fifths">3/5</div>
  <div class="one fifth">1/5</div>
</div>

Sixths

1/6
2/6
3/6
<div class="row">
  <div class="one sixth">1/6</div>
  <div class="two sixths">2/6</div>
  <div class="three sixths">3/6</div>
</div>

Sevenths

1/7
2/7
4/7
<div class="row">
  <div class="one seventh">1/7</div>
  <div class="two sevenths">2/7</div>
  <div class="four sevenths">4/7</div>
</div>

Eighths

1/8
2/8
5/8
<div class="row">
  <div class="one eighth">1/8</div>
  <div class="two eighths">2/8</div>
  <div class="five eighths">5/8</div>
</div>

Ninths

1/9
3/9
5/9
<div class="row">
  <div class="one ninth">1/9</div>
  <div class="three ninths">3/9</div>
  <div class="five ninths">5/9</div>
</div>

Tenths

1/10
3/10
5/10
1/10
<div class="row">
  <div class="one tenth">1/10</div>
  <div class="three tenths">3/10</div>
  <div class="five tenths">5/10</div>
  <div class="one tenth">1/10</div>
</div>

Elevenths

1/11
3/11
5/11
2/11
<div class="row">
  <div class="one eleventh">1/11</div>
  <div class="three elevenths">3/11</div>
  <div class="five elevenths">5/11</div>
  <div class="two elevenths">2/11</div>
</div>

Twelfths

1/12
3/12
5/12
2/12
1/12
<div class="row">
  <div class="one twelfth">1/12</div>
  <div class="three twelfths">3/12</div>
  <div class="five twelfths">5/12</div>
  <div class="two twelfths">2/12</div>
  <div class="one twelfth">1/12</div>
</div>


Column Shuffling/Source Reordering

(Adapting column ordering without changing source order)

1/5 (first)
4/5 (last)
<div class="row">
  <div class="one fifth right-four">1/5 (first)</div>
  <div class="four fifths left-one">4/5 (last)</div>
</div>

2/3 (first)
1/3 (last)
<div class="row">
  <div class="two thirds right-one">2/3 (first)</div>
  <div class="one third left-two">1/3 (last)</div>
</div>

1/4 (first)
1/4 (second)
1/4 (third)
1/4 (fourth)
<div class="row">
  <div class="one fourth right-two">1/4 (first)</div>
  <div class="one fourth left-one">1/4 (second)</div>
  <div class="one fourth right-one">1/4 (third)</div>
  <div class="one fourth left-two">1/4 (fourth)</div>
</div>

3/8 (first)
2/8 (second)
3/8 (third)
<div class="row">
  <div class="three eighths right-five">3/8 (first)</div>
  <div class="two eighths left-three">2/8 (second)</div>
  <div class="three eighths left-three">3/8 (third)</div>
</div>


Centering

1/7

1/5

1/3
<div class="row">
  <div class="one centered mobile seventh">1/7</div>
</div>
<div class="row">
  <div class="one centered mobile fifth">1/5</div>
</div>
<div class="row">
  <div class="one centered mobile third">1/3</div>
</div>


Offsetting

11

10

9

8

7

6

1
5

2
4

3
3

4
2

5
1

4/5

8/11

5/7
<div class="row">
  <div class="eleven mobile twelfths skip-one">11</div>
</div>
<div class="row">
  <div class="ten mobile twelfths skip-two">10</div>
</div>
<div class="row">
  <div class="nine mobile twelfths skip-three">9</div>
</div>
<div class="row">
  <div class="eight mobile twelfths skip-four">8</div>
</div>
<div class="row">
  <div class="seven mobile twelfths skip-five">7</div>
</div>
<div class="row">
  <div class="six mobile twelfths skip-six">6</div>
</div>
<div class="row">
  <div class="one mobile twelfth">1</div>
  <div class="five mobile twelfths skip-six">5</div>
</div>
<div class="row">
  <div class="two mobile twelfths">2</div>
  <div class="four mobile twelfths skip-six">4</div>
</div>
<div class="row">
  <div class="three mobile twelfths">3</div>
  <div class="three mobile twelfths skip-six">3</div>
</div>
<div class="row">
  <div class="four mobile twelfths">4</div>
  <div class="two mobile twelfths skip-six">2</div>
</div>
<div class="row">
  <div class="five mobile twelfths">5</div>
  <div class="one mobile twelfth skip-six">1</div>
</div>
<div class="row">
  <div class="four mobile fifths skip-one">4/5</div>
</div>
<div class="row">
  <div class="eight mobile elevenths skip-three">8/11</div>
</div>
<div class="row">
  <div class="five mobile sevenths skip-two">5/7</div>
</div>


Equal Columns

First Column

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Second Column

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Third Column

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<div class="equalize row">
  <div class="one third padded">
    <h1>First Column</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
  <div class="one third padded">
    <h1>Second Column</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  </div>
  <div class="one third padded">
    <h1>Third Column</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
</div>