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
.
Heads Up!
The grid system is designed to be used as a wrapping scaffold only. All custom styling should be added to elements within each column, doing otherwise could break your layout.
Right-to-Left Language Support
Adding the attribute dir="rtl"
to the html
tag will reverse the order of columns and all other
column overload behaviour to allow for right-to-left languages.
Fixed Layout
To disable the default fluid grid behaviour and force the grid into a non-responsive layout do the following:
-
Remove the
<meta name="viewport" />
meta tag from the head of your document. -
Add the class
.fixed
to the container. -
Use
.col-xxs-{number}
range on the columns.
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.
<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.
<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.
<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.
<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.
<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}
.
<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.
Heads Up!
Equal height columns do not work with the block row grid as that layout uses a single row with wrapping columns.
A column with a short amount of copy.

<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.
Heads Up!
Column numbers within the block grid system work differently to the rest of the grid. Instead of designating the number out of 12 columns to represent, they designate instead the number of columns to show.
For example: .block-row-xxs-6
instructs the browser to show 6 equal columns resetting
on each 7th item.
<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>