# Grid

## A grid is a key feature of any CSS framework - it helps to organise content by placing them into responsive columns.

## Automatic grid

For example, here is a 'row' with 4 'columns':

auto
auto
auto
auto

Columns can contain anything, of any length. They can be implemented in services like Twitter, where your feed page is organised in columns.

To make the row above:

    <div class="row">
      <div class="col">
        auto
      </div>
      <div class="col">
        auto
      </div>
      <div class="col">
        auto
      </div>
      <div class="col">
        auto
      </div>
    </div>

In this case, the columns automatically adapt to fill the space, and allow for up to 12 columns in one row.

## Sizes

Of course, you can specify the size of columns to achieve more dynamic layouts, by adding the class colX, where X is a number from 1 to 12, specifying the relative size of the column. Size-specified columns can be freely mixed with automatic columns.

col2
auto
col4

    <div class="row">
      <div class="col col2">
        col2
      </div>
      <div class="col">
        auto
      </div>
      <div class="col col4">
        col4
      </div>
    </div>

## Wrapping

Each row can contain up to 12 columns. Any columns after this will automatically wrap onto the next line:

col6
col3
auto
col4
auto
col2

The above example is contained within a single row and with the same syntax as in the previous example.

## Anything is possible

It is important to understand that rows can be arranged in any pattern. Hopefully this should help:

col12
col11
col1
col10
col1
col1
col9
col1
col1
col1
col8
col1
col1
col1
col1
col7
col1
col1
col1
col1
col1
col6
col1
col1
col1
col1
col1
col1
col5
col1
col1
col1
col1
col1
col1
col1
col4
col1
col1
col1
col1
col1
col1
col1
col1
col3
col1
col1
col1
col1
col1
col1
col1
col1
col1
col2
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1

## Offset

If you don't want to use empty columns to offset columns, you can use the offsetX, where X is a number from 1-11:

auto
no offset
auto
offset1
auto
offset2
auto
offset3
auto
offset4
auto
offset5
auto
offset6
auto
offset7
auto
offset8
auto
offset9
auto
offset10
col2
no offset
auto
offset3
auto
offset3

## Order

You can use the orderX class (where X is a number from 1 to 12) to change the order of columns.

col4
order2 (placed first)
col4
order3 (placed second)
col4
order1 (placed third)