The Grid System

Responsive comes with an incredibly flexible and powerful grid system offering, not just one but 5 tiers of 12 column fluid grids in two variants that allow for granular control over layout across all devices. It also offers equal height columns and a self resetting block grid for equal column widths again in the two variants.

No other grid offers the power and flexibility that is provided by the Responsive framework. The system has been written from an entirely mobile first perspective with each level overwriting the previous one as the viewport width scales up.

To prevent content hitting the side of the viewport by standard all grid rows would be wrapped in a div with the class .container. This constrains the grid to 98% of the viewport width up to a maximum of 1140px.

Full width rows should be wrapped in div with the class .container-full.

Media Queries

The media queries specifying breakpoints are as follows:

Level Selector Width
Extra, extra small (initial) .col-xxs-{number} Up to 37.5em (600px at 16px/1em)
Extra small .col-xs-{number} 37.5em to 48em (768px at 16px/1em)
Small .col-s-{number} 48em to 62em (768px to 992px at 16px/1em)
Medium .col-m-{number} 62em to 75em (992px to 1200px at 16px/1em)
Large .col-l-{number} 75em and over (1200px at 16px/1em)

Design guidelines (rendered as png's) for the default grid at maximum widths of 1140px and 970px are available for download here.

Examples

In the following examples the markup is rendered using the .col-xxs-{number} tier. This is to ensure column visibility for all viewports. In your sites you can use any .col-{size}-{number} tier to start with.

Basic

Here is a very basic example of the grid system showing all 12 columns.

12
11
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
10
1
11 
<div class="row">
    <div class="col-xxs-12">
        12
    </div>
</div>
<div class="row">
    <div class="col-xxs-11">
        11
    </div>
    <div class="col-xxs-1">
        1
    </div>
</div>

No Gutter

Adding the class .no-gutter to a row triggers the gutterless column layout.

12
11
1
10
2
9
3
8
4
7
5
6
6 
<div class="row no-gutter">
    <div class="col-xxs-12">
        12
    </div>
</div>
<div class="row">
    <div class="col-xxs-11">
        11
    </div>
    <div class="col-xxs-1">
        1
    </div>
</div>

Nesting

By adding a new .row class to a div to designate a new level it is possible to nest the grid.

6
6
6
6
6
6 
<div class="row">
    <div class="col-xxs-6">
        6
        <div class="row">
            <div class="col-xxs-6">
                6
            </div>
            <div class="col-xxs-6">
                6
            </div>
        </div>
    </div>
    <div class="col-xxs-6">
        6
        <div class="row">
            <div class="col-xxs-6">
                6
            </div>
            <div class="col-xxs-6">
                6
            </div>
        </div>
    </div>
</div>

Resizing

In this example the grid from each tier is being overwritten as the viewport scales up.

6
6
12
<div class="row">
    <div class="col-xxs-4 col-xs-6 col-s-4">...</div>
    <div class="col-xxs-4 col-xs-6 col-s-4">...</div>
    <div class="col-xxs-4 col-xs-12 col-s-4">...</div>
</div>

Offsetting Columns

Columns can be offset by each column width.

Use classes .offset-{range}-{number} to push by column width.

4
4
4
<div class="row">
    <div class="col-xxs-4">4</div>
    <div class="col-xxs-4 offset-xxs-4">4</div>
</div>
<div class="row">
    <div class="col-xxs-4 offset-xxs-4">4</div>
</div>

Ordering Columns

The order of columns can be reversed by combining classes .push-{range}-{number} and .pull-{range}-{number}.

4
8
<div class="row">
    <div class="col-xxs-4 push-xxs-8">4</div>
    <div class="col-xxs-8 pull-xxs-4">8</div>
</div>

Equal Height

Adding the class .equal-height to the row renders the columns in each row equal in height. When stretching the full width of their container, columns collapse to the height of their content.

A column with a short amount of copy.

responsive image 
<div class="row equal-height">
    <div class="col-xxs-6">
        <p>A column with a short amount of copy.</p>
    </div>
    <div class="col-xxs-6">
        <img src="../../assets/img/768x900.jpg" alt="responsive image" title="responsive image" />
    </div>
</div>

Block Grid

The block grid allows us to evenly split contents of a list within the viewport. These items will automatically reset to a new row based on the set column count.

Assignment of the grid is done by using .block-row-{size}-{number} classes on the parent element.

2 3 4 5 6
2 3 4 5 6
2 3 4 5 6
2 3 4 5 6
2 3 4 5 6
2 3 4 5 6 
<div class="block-row-xxs-2 block-row-xs-3 block-row-s-4 block-row-m-5 block-row-l-6">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>