Responsive Web Design just got Easier with the Responsive Grid System

Why Use It?

Have Any Number of Columns

Don't be forced into having a fixed number of columns across a whole page. You can have whatever you want, wherever you need it.

Scales to Any Width

Because it uses percentages, your fluid columns will fit into any width. The margins (gutters) use percentages too.

It's Smart

There's no need to hack in any offsets or marginless final columns. It's the last time you need to use .last and the end of .end.

Put the Content First

Instead of fitting your content to your grid, you can make your grid suit your content. Doesn't that feel good?

It Fits In with You

It plugs into your existing HTML and CSS, and it's so easy to do so. It's your friend.

Simple Breakpoints

Mobile versions of the grid are already baked in, or you can cook up your own.

It's Easy

Use it on as simple or as complex a project as you wish. You'll be done in minutes.

No Maths Required

As long as you can count up to the number of columns you need, you'll be fine.

The Markup

I'm only showing sample code for a 3 column layout here, but the Responsive Grid System goes all the way to 12, baby!

The HTML

<div class="section group">
	<div class="col span_1_of_3">
	This is column 1
	</div>
	<div class="col span_1_of_3">
	This is column 2
	</div>
	<div class="col span_1_of_3">
	This is column 3
	</div>
</div>

The CSS

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}

How It Works

.section

splits up the page horizontally. You'll need a few of these to break up the content, and you can use them in your main wrapper, or within other divs.

.col

divides the section into columns. Each column has a left margin of 1.6% (around 20 pixels on a normal monitor), except the first one. Using .col:first-child { margin-left: 0; } means you don't need to use class="last" anywhere. It works in all browsers since IE6.

.group

solves floating problems, by forcing the section to self clear its children (aka the clearfix hack). This is good in Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE 6+.

.span_1_of_3

specifies the width of the column. Using percentages means it's 100% fluid.

@media queries

as soon as the screen size gets less than 480 pixels the columns stack and the margins disappear.

Hey did you notice that this page layout has 4 columns in some places, 3 in others and even 8 a bit further down*? That's because of the goodness baked right into the Responsive Grid System!

* provided you're looking at it on a screen larger than 768 pixels wide. On smaller screens it's, like, responsive.

Grid Size

Below you can see each row split up into the most available columns.

Two Columns

1 of 2

Three Columns

1 of 3

Four Columns

1 of 4

Five Columns

1 of 5

Six Columns

1 of 6

Seven Columns

1 of 7

Eight Columns

1 of 8

Nine Columns

1 of 9

Ten Columns

1 of 10

Eleven Columns

1 of 11

Twelve Columns

1 of 12

Who's Using It?

Apart from this site? Others using the responsive grid system:

Sample Layouts

Here's how you can use the Responsive Grid System to suit your content:

The 'Intro Page'

Has a header row with a logo and some nav, some featured content (maybe a carousel or some headline text), a row for the smaller features and a footer.

The logo, spanning 1 of 3

The navigation, spanning 2 of 3

The carousel, spanning 3 of 3

Feature, spanning 1 of 3

The footer, spanning 3 of 3

The 'Blog'

Has a header row, a row with the content and the sidebar and a footer.

The header, spanning 3 of 3

The content, spanning 2 of 3

The sidebar, spanning 1 of 3

The footer, spanning 3 of 3

The 'Portfolio'

Has a header row with a logo and some nav, a couple of rows of portfolio items and a footer.

The logo, spanning 1 of 3

The navigation, spanning 2 of 3

Portfolio item, spanning 1 of 4

The footer, spanning 3 of 3

The 'Golden Ratio'

According to wikipedia, two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one. It has a value of 1.618. If you use a grid of eight, and split into five columns and three columns the ratio is 1.66, which is pretty close.

This column spans 5 of 8

This column spans 3 of 8

Let's Go to Work

Grab the code, plug in what you need, then relax. You will have made a reponsive web site in about five minutes time.

Either Get The Lot

Contains the whole shebang

the HTML
the CSS for all layouts, from 2 to 12 columns
media queries to stack the columns at less than 480px

Go on and download the zip

Or find this on Github.

Or Just Take What You Need

1. Use the HTML as detailed above or grab an example.

2. Grab the column setup css.

3. Now choose the css for the number of columns you want. Paste them into your master css or reference them in the document head. They include media queries to stack them on smaller screens.

Release Notes

Launched 20th June 2012 this is the Responsive Grid System version 1.0.

Get in early! Buy low, sell high and all that.

Or Make Your Own

Use the new responsive grid calculator to make your own. Decide the number of columns you want in a row & set the margin you want to use. Some sweet maths will do the heavy lifting for you.

What Margin is Best?

A margin of 1.6% gives you about 20 pixels on a standard monitor, but feel free to go large to suit your content.

Don't make the margin more than 10% or you'll end up with more margin than content!

Going Further with Breakpoints

Maybe you don't want to just stack the columns at a smaller screen size? Depending on what you're doing with the Responsive Grid System you can cook up some fun nth-child recipes to adjust the layout.

Go from 8 Column to 4 Column

If you're only using an 8 column grid to show 8 divs of 1 column each (like the screenshots in the Who's Using It section above) you can switch this down to 4 columns using:

.span_1_of_8 {
	width: 22.6%;
	margin: 1% 0 1% 3.2%;
}

.span_1_of_8:nth-child(4n+1) {
	clear: both;
	margin-left: 0;
}

We've upped the width of the column from 11.1% to 22.6% and doubled the margin to 3.2%. The nth-child tomfoolery removes the margin and clears every fourth column.

The Spice Girls can make two become one. We can turn 8 into 4. Much more satisfying.

Go from 12 Column to 4 Column

Again, if you're only using an 12 column grid to show 12 divs of 1 column each you can switch this down to 4 columns using code similar to the previous example:

.span_1_of_12 {
	width: 22.6%;
	margin: 1% 0 1% 3.2%;
}

.span_1_of_12:nth-child(4n+1) {
	clear: both;
	margin-left: 0;
}

Code the Responsive Grid Fantastic

I hope that the Responsive Grid System gives you the freedom to adjust your layout at different breakpoints to suit your content.

Stop treating this place like a hotel. Go forth and code the responsive grid fantastic!