Columns

A 12 column responsive grid for easy layout creation

The grid is composed of horizontal rows the max-width of the page of container. The rows form the outer layer of the layout and the columns form the inner layer of the layout. For example:

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
HTML Example
<div class="row"> 
   <div class="column width-2"> ... </div>
   <div class="column width-10"> ... </div>
</div>

Division

The division of columns

Easily division the columns to create complex layouts. To divide the columns with using class .width-x For example:

4.4
4.4
4.4
6
HTML Example
<div class="row">
   <div class="column width-6">
      <div class="column width-4"> ... </div>
      <div class="column width-4"> ... </div>
      <div class="column width-4"> ... </div>
   </div>
   <div class="column width-6"> ... </div>
</div>

Offset

The moving of sections

With the using class .offset-x you can move the sections from the this location to other up to eleven columns. For example:

4w
1w
4w
HTML Example
<div class="row">
   <div class="column width-4"> ... </div>
   <div class="column width-1 offset-1"> ... </div>
   <div class="column width-4 offset-2"> ... </div>
</div>

Position

The rearrange of columns

By using classes .left-x and .right-x you can specify from which columns began or by using classes .centered in columns you can centered columns. For example:

left-10
right-2

Width-7 Centered
HTML Example
<div class="row">
   <div class="column width-2 left-10"> ... </div>
   <div class="column width-10 right-2"> ... </div>
   <div class="column width-7 centered"> ... </div>
</div>

Responsive

You can choose the columns width for any devices

You can choose the columns width for any devices For the tablet and mobile width add the class .auto-width
For the hidden of columns on tablet add the class .tablet-hide
For the hidden of columns on mobile add the class .mobile-hide
For the hidden of columns on mobile and tablets add the class .auto-hide For example:

Auto-width
Tablet hidden
Auto-width
Auto-width
Auto-width
Auto-width
Auto-hide
Auto-hide
HTML Example
<div class="row">
   <div class="column width-6 auto-width"> ... </div>
   <div class="column width-6 tablet-hide"> ... </div>
</div>

<div class="row">
   <div class="column width-6 auto-width"> ... </div>
   <div class="column width-6 auto-width"> ... </div>
</div>

<div class="row">
   <div class="column width-3 auto-width"> ... </div>
   <div class="column width-3 auto-width"> ... </div>
   <div class="column width-3 auto-hide"> ... </div>
   <div class="column width-3 auto-hide"> ... </div>
</div>

Grid items

This kind of columns can use for gallery, item list and etc.

Add the class .grid-items inside row.
If you want create auto margin between columns add only to columns the classes .width-x use only 2,3,4,6. For example:

Width - 6
Width - 6
Width - 4
Width - 4
Width - 4
Width - 3
Width - 3
Width - 3
Width - 3
Width - 2
Width - 2
Width - 2
Width - 2
Width - 2
Width - 2
HTML Example
<div class="row grid-items">
   <div class="column width-3"> ... </div>
   <div class="column width-3"> ... </div>
   <div class="column width-3"> ... </div>
   <div class="column width-3"> ... </div>
</div>