# Grid system demo

## Create any layout you want easily

This page demonstrates various possible layouts with the grid system included with the theme. Although based on a 960 grid system idea (12 columns), it has some improvements for achieving flexibility and productivity. For example:

- Subcontainer classes for nesting the grid columns
- Uses 960.gs class naming convention
- Forget about classes like 'last' or 'first' to mark appropriate columns, focus here is simplicity and flexibility: you don't need them
- Only 4Kb, uncompressed

For 960.gs users, learning curve doesn't exist - the grid system already uses class naming convention already established with 960.gs. Have a look and explore some examples of the grid layout (hover mouse over the column to see the content width):

Sidebar example
*
*
*
*
*
*
*
*
*
*
*
*

###### Full width

Full width column

###### 2 columns

First column

Second column

###### 3 columns

First column

Second column

Third column

###### 4 columns

First column

Second column

Third column

Fourth column

###### asymetric

First column

Second column

Third column

Fourth column

Fifth column

Sixth column

###### Subcontainers (nesting)

First column

Second column

Second column

First column

Second column

Second column

First column

Second column

Second column

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

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

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

First column

Second column

demo column

demo column

demo column

demo column

demo column

demo column

Another column

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

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

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

Sidebar column

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

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

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

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

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

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

First column

Second column

First column

Second column

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

First column

Second column

First column

Second column

First column

Second column

First column

Second column

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

First column

Second column

First column

Second column