Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content. This template uses a set of commonly understood fractional units to provide a platform agnostic layout grid. All columns are wrapped in a .group container, all fractional columns are placed directly within the .group container. All fractional columns should equal one whole group. For example two (2) .halfs equal one whole group. Likewise three (3) thirds equal one whole.

• A row is identified by the .group class
• Columns are identified through fractional notations like .half, .third, .two-thirds, .quarter, and .three-quarters
• Use .group to create horizontal groups of columns.
• Content should be placed within fractional layout columns.

NOTE: Grids display a 1px gray border in demo only.

Example:

Source Code:

<div class="group grid-demo"> <div class="half">.half</div> <div class="half">.half</div> </div> <div class="group grid-demo"> <div class="third">.third</div> <div class="two-thirds">.two-thirds</div> </div> <div class="group grid-demo"> <div class="quarter">.quarter</div> <div class="three-quarters">.three-quarter</div> </div>