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:

---

NOTE: For more CSS breakpoint-specific column classes and other responsive grid options we suggest utilizing what is available in Bootstrap.

    
.half
    
.half



    
.third
    
.two-thirds



    
.quarter
    
.three-quarter