Grid System

The grid system in ajcss is by default responsive, and quite simple to use. It is heavily based on the grid system that Skeleton provides, so if you are familiar with that, this should be a breeze. It works on a twelve column system

Example: Two Column Collapse

<div class="row cf"> <div class="six columns bg-near-white">First Column</div> <div class="six columns bg-near-white">Second Column</div> </div>

In this example, there are two columns that will collapse into two rows when viewed by a mobile device. Columns must be a child of row for it to work. This is quite a simple example, so let's move on to a more complex one.

Example: Four Column Collapse

<div class="row cf"> <div class="two columns bg-near-white">First Column</div> <div class="four columns bg-near-white">Second Column</div> <div class="four columns bg-near-white">Third Column</div> <div class="two columns bg-near-white">Fourth Column</div> </div>

That shouldn't have been too difficult to understand. We have two smaller columns at the edges (the two columns class) and then we have the two larger columns in the middle (the four columns class).