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':

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.

<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:

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:

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:

Order

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