Going Further

The Science Bit

So you're a responsive web design expert now and you want to take this grid stuff a bit further? Get your fix right here...

Fun 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 on here) 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;

Just add this in at the breakpoint where you want everything to change.

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!

SCSS Version

How would you like to get your hands on a .scss version that makes the grid for you? I for one welcome our Sassy Robot Overlords...

@import 'decimal';

$margin: 1.6%;

@for $cols from 2 through 12 {
	$span: $cols;
	@while $span > 0 {
		@if ($span == $cols) {
			.span_#{$span}_of_#{$cols} { width: 100%; }
		} @else {
			.span_#{$span}_of_#{$cols} { width: decimal-round( (((100 - ($margin * ($cols - 1))) / $cols) * $span) + (($span - 1) * $margin) , 2, 'floor'); }
		$span: $span - 1;

Just set the margin at the top, the rest is automatic. You're welcome.

(You'll need to grab this rounding function from GitHub).

Want Me to Do It For You?

graham miller

I'm Graham Miller - I built the Responsive Grid System to help you get started, but if you need something a little more complex I'd love to do it for you. I build responsive websites for people in the UK and around the World.

Get in Touch

The best way to contact me is through Edward Robertson web design, where we craft web sites that work beautifully on every device. We've been creating websites since 1996 and we're still not tired.

You can send me an email or contact me in our Newcastle Office.