Grids

Implementation

Overview

The grid system is being implemented through a series of CSS classes. These classes designate how big an element will be in relation to the grid.

Column WidthClass Name
Column Width: 1Class Name: one-column
Column Width: 2Class Name: two-column
Column Width: 3Class Name: three-column
Column Width: 4Class Name: four-column
Column Width: 5Class Name: five-column
Column Width: 6Class Name: six-column
Column Width: 7Class Name: seven-column
Column Width: 8Class Name: eight-column
Column Width: 9Class Name: nine-column
Column Width: 10Class Name: ten-column
Column Width: 11Class Name: eleven-column
Column Width: 12Class Name: twelve-column
Column Width: 100%Class Name: full

HTML

Three column

Six column


Four column

Five column


Nine column

<div class="three-column" style="background-color: gray;">

    <p style="color: #fff; text-align: center; margin: 10px 0;">Three column</p>

</div><!-- three-column -->

 

<div class="six-column" style="background-color: gray;">

    <p style="color: #fff; text-align: center; margin: 10px 0;">Six column</p>

</div><!-- six-column -->

 

<div class="clearfix"></div><br>

 

<div class="four-column" style="background-color: gray;">

    <p style="color: #fff; text-align: center; margin: 10px 0;">Four column</p>

</div><!-- four-column -->

 

<div class="five-column" style="background-color: gray;">

    <p style="color: #fff; text-align: center; margin: 10px 0;">Five column</p>

</div><!-- five-column -->

 

<div class="clearfix"></div><br>

 

<div class="nine-column" style="background-color: gray;">

    <p style="color: #fff; text-align: center; margin: 10px 0;">Nine column</p>

</div><!-- nine-column -->