Last week I talked about 960 Grid System is Getting Old. Surprisingly a lot of comments have been made. It seems like people are using 960gs because of the "golden ratio" — all numbers are even. I’m a designer, not a grid scientist. Why restrict your layout so that it can fit into this 960gs? A grid is supposed to help you in design, not to limit your creativity. The 978 grid, that I mentioned before, is not just about increasing the page width, but to loosen the gutter space so users can read it more comfortably. Today, I would like to write a follow up post to further ellaborate on some of the points I brought up initially.

Problems with 960.gs

Narrow Gutter Space

I did a quick Photoshop mockup to show how 20px gutter space would look like on 960gs. The gutter is a bit too narrow for modern design.

narrow gutter

To solve this small gutter problem, a lot of people add padding to either the content area or sidebar containers, making that subsequent content area smaller.

narrow gutter solution

Unnecessary Left and Right Margin

To those who don’t know, the content width in 960gs is actually 940px, not 960px. It is 960px because of the added margin space on the left and right. Some people argue that this margin space helps visibility on mobile devices such as the iPhone and iPad. Technically, if there is a margin required, it should be applied on the container, not the columns.

unnecessary margin

Too Many Classes

Visual aesthetic might be a personal biased but, even so, there seems to be some fundamental CSS issues as well. Below is a sample case. To achieve the layout result I’ve designed here, with 960gs, you will be required to add extra CSS classes: alpha, omega, and clear. The alpha & omega class is required to get rid of the margin space on the left and right hand sides of the columns. A clear class is also required to clear the floats after each row of columns.

too many classes

The Simpler 978px Grid (demo)

The 978px grid that I mentioned in my previous article got rid of the unnecessary left and right margin. As a result, the content width is increased by 38px. The gutter space has incresed from 20px to 30px. It still fits in the 1024 default display and the columns can be divided in any number of ways: 1/11, 3/3/3/3, 4/4/4, 3/9, etc.

978 grid

978px HTML & CSS (demo)

The following is a simpler CSS grid that Darcy and I came up with and deals with scenarios, like the "Too Many Classes", in an elegant way. There is only a left margin on the grids which creates the gutter space. Grid12 is not required because grid12 is the width of the container. There is no .alpha or .omega class, but a single.first class required for the first column in every new row. The purpose of the .first class is to clear the floats and get rid of the left margin space. Since the .first class clears the float, a.clear class is not required after each row.

.container {
	width: 978px;
	margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
	float: left;
	margin-left: 30px;
}
.grid1 {
	width: 54px;
}
.grid2 {
	width: 138px;
}
.grid3 {
	width: 222px;
}
.grid4 {
	width: 306px;
}
.grid5 {
	width: 390px;
}
.grid6 {
	width: 474px;
}
.grid7 {
	width: 558px;
}
.grid8 {
	width: 642px;
}
.grid9 {
	width: 726px;
}
.grid10 {
	width: 810px;
}
.grid11 {
	width: 894px;
}
.first {
	margin-left: 0;
	clear: left;
}

The Simpler 940px Grid (demo)

If you really want to keep the golden ratio, you can achieve the same result with this simpler grid. For those that argue the left and right margin is required to prevent the content from being trimed off in the mobile devices should think about appling that space to the container, not the columns themselves.

Conclusion

Don’t force your design to fit to a grid that hinders your creative genius. Do what makes your designs look good and is comfortable to you. A grid should be your layout guideline, not restriction.

214 Comments

speedyop
Sep 28, 2010 at 11:07 am

i like grid design very much.
but the problem is that it’s not well implemented in xhtml/css

you are supposed to change the css to change the design of a site, not the xhtml.

anyone has a grid system layout without this anti semantic problem ?

The Frosty
Sep 28, 2010 at 11:16 am

I like it, will play with this feature. I found the same issues with 960 and never “used” it’s CSS but just it’s form.

Chris Hart
Sep 28, 2010 at 11:17 am

Whilst I use a grid as a backdrop to all my designs it very rarely makes it into code like you’ve suggested.

Nikhil Nigade
Sep 28, 2010 at 11:17 am

I was waiting for this to be released and I had a gut feeling that you would. Thank you so much.

Mariusz
Sep 28, 2010 at 11:18 am

“A clear class is also required to clear the floats after each row of columns.” – this proves that you didn’t look deep enough (or don’t know much about modern CSS, which I highly doubt). You’re supposed to use .clearfix that is a modern, no-excessive-markup solution built in the latest 960GS package.

Audee Velasco
Sep 28, 2010 at 11:20 am

nice… at 30px between grids it would looks nicer,and have more room to breath. Thanks for sharing.

Nick La
Sep 28, 2010 at 11:45 am

@Mariusz Very appreciated your comment. To apply a .clearfix, that means you still need to add an additional div tag around the row of columns.

Jean-Baptiste
Sep 28, 2010 at 12:19 pm

You may want to have a look at it :
http://www.positioniseverything.net/easyclearing.html

Tom Karels
Sep 28, 2010 at 12:38 pm

Agreed 100%. Never really understood why 960 bloated their code like that… and didnt understand why they made added that left and right margin to the container.

Any chance on getting a .psd of the grid?

bart
Sep 28, 2010 at 12:59 pm

Has anyone tried the http://1kbgrid.com/. Looks super simple.

BBQbrains
Sep 28, 2010 at 12:59 pm

I actually like having an extra div for rows. It allows you to nest stacked columns without the .first class, insert inline content between rows, and provides a common backdrop for each row. It also might be easier to traverse the DOM looking for a group.

I do like your fat gutters. And that’s why I like to apply margins to the content, not the columns.

Nick La
Sep 28, 2010 at 2:06 pm

@Tom Karels – I use this tool to generate the grid: http://www.spry-soft.com/grids or you may download the grid background here: http://www.webdesignerwall.com/demo/simpler-grid/978-grid-bg.png

Vladimir Carrer
Sep 28, 2010 at 3:03 pm

Nice work. I like the coding logic and it is very similar to my The Golden Grid. Just float: left the unit size and the margin(gutter). I think the main size 960 or 970 or 978 is less important than the gutter size. 90% of the decision making when you build a Grid System is what gutter size you should use. And the that decision depends on what is your content. So there are no miracle Grid System but there are Grid Systems who can hold your content better the others.

Julian
Sep 28, 2010 at 3:17 pm

Excelent contribution. Thanks

Jay
Sep 28, 2010 at 5:10 pm

Excellent followup post. My support for this new grid system can be found here: http://978.gs/

Marlon Deason
Sep 28, 2010 at 5:59 pm

I think you are beating a dead horse. The 960 grid works well enough. I think you are going to find that most designers are much more interested in develping sites which also load well on iPad, iPhone, Android and other devices.

The 960 grid is visible and stable on most browsers and screen sizes – good luck winning converts to learn a new system when the old one works fine and requires zero learning curve.

Your time would be much better spent on finding a default grid that fits most mobile devices.

Simon
Sep 28, 2010 at 6:18 pm

Not sure if you realize or not, but 960.gs has a custom css generator that you can customize the Column width, Number of columns and Gutter width to whatever you want. Here’s the link: http://www.spry-soft.com/grids/
Or you can go to 960.gs and click on the button: “Custom CSS generator”

Gustavo Stocchero
Sep 29, 2010 at 12:30 am

The margins are necessary. It is a downside to blueprint, as you need to add extra code to keep content away from browser frame.

I really hate sites that jam into browser frames…

tschundeee
Sep 29, 2010 at 1:58 am

Get rid of static grids! For what!? They are so not-dynamic that it hurts. I use fluid grids or even NO grids.

Claudio Pustorino
Sep 29, 2010 at 2:33 am

I think that 978 grid not reach the target. Blueprint is a more efficient grid system. Easy to set-up, complete and more flexible. Allow you to build your own grid, or use a 24 column standard grid with no extra markup and a lot of features.

Take a look http://www.blueprintcss.org/

Ben
Sep 29, 2010 at 4:22 am

Well if you think the 960 grid limits your creativity, I don’t really see how adding a few pixel will change that.

I do however like the increased gutter space for better readability.

Andy Marshall
Sep 29, 2010 at 5:40 am

I completely see your point that the 978px grid gives much needed breathing space between columns… my only gripe is that it doesn’t work with the standard 300px wide adverts.

Brig
Sep 29, 2010 at 11:42 am

Awesome…..i use the 960gs but have tried not to let it dominate the design….it is more of a reference point for elements inside the design. Great demo as well!
thanks man!

Jamie
Sep 29, 2010 at 1:59 pm

@Andy Marshall
Just use the .grid4 at 306px, and put your ad in a container with 3px side padding?

Matt Pealing
Sep 29, 2010 at 2:31 pm

Interesting article! I wasn’t really considering using the 978px after reading your previous article last week, but this has made me want to give it a shot ;)

adikahorvath
Sep 29, 2010 at 3:32 pm

The grid depends on the project, i think these grids are unnecessary.

Matt
Sep 30, 2010 at 8:50 am

love this simpler css grid.. more balanced than 960gs

but, what’s the best? 12, 16 or 24 columns? layout has to be fluid (grids and typo) or “mobile first”? that’s the dilemma!

Joe
Sep 30, 2010 at 10:23 am

Food for thought:

The iPhone 4 screen is 960 pixels at its widest.

This means a site built with 960.gs can have a 1:1 (non distorted) appearance. Not a huge factor, but not possible with a site that’s 978px wide.

madeofsquares
Sep 30, 2010 at 10:49 am

Andy:

…my only gripe is that it doesn’t work with the standard 300px wide adverts.

A fair point I guess, however; I work for a large publishing company as the designer for a digital team. According to the stats from “upstairs” demand for those 300px wide ads has fallen to that of the larger 336px wide bastards! But as adikahorvath said, it really depends on the project in the end.

Jamal
Sep 30, 2010 at 8:16 pm

I may be the odd man out for saying this, but I feel that people depend on pre made grid layouts way too much. I like creating my own layout, knowing the code of the layout, and knowing the feeling of figuring out the right proportions. Maybe this is just me, but I would rather struggle with making my own grid an get to a good result, then use a pre made one any day.

seri
Sep 30, 2010 at 11:17 pm

very useful ,thanks.I always like 950px

Kuswanto
Oct 1, 2010 at 5:37 am

Where is the PSD template? Care to share?

Jordan Moore
Oct 1, 2010 at 5:40 am

All the .grid_n classes have a left float *and* a left margin – IE6 will shit itself with double margins.

paul
Oct 1, 2010 at 5:40 am

that’s funny, I’m designing a video grid layout and found exactly the same annoyances and was playing around with a 978px grid, then I went for a 940px one. that’s a coincidence.

MaRmARk0
Oct 1, 2010 at 6:20 am

Just like @adikahorvath said – grids aren’t necessary and each project is too unique to use such as ‘globalized’ thing as 960gs is. Personally I’ve never use it (except reset.css).

Shep
Oct 1, 2010 at 6:50 am

Although they save time on prototyping, I’ve always had a slightly uneasy feeling using css frameworks, and I agree about the too-narrow gutters.

Looks like a nice solution.

James
Oct 1, 2010 at 7:36 am

I just recently ran into this one:
http://thesquaregrid.com
I like it alot

Tim Millwood
Oct 1, 2010 at 7:41 am

Now to create a fluid % version.

Alex
Oct 1, 2010 at 9:10 am

I really do not see the point in css frameworks. They totally hinder creativity and are not semantic at all. I am surprised you are even talking about them. Hand, custom built code always wins in my book.

Geek
Oct 1, 2010 at 12:08 pm

Mutha F laying out in grids. Grids suck and are for lazy people or web pushers. Hand coded, custom, is the way to go.

bcarter
Oct 1, 2010 at 12:16 pm

Honestly, I feel that a grid system should be used as a guide and not the rule. Creativity in design will lead us to operate outside the limitations of a grid system, and the golden rule my professors in college were always bringing up, was meant to be broken from time to time.

It’s important to experiment with design, and often I feel like a grid can limit designers more than help. Not to say there will not be projects where a 960 or 978 grid has it’s place—on the contrary there will be many instances where when dealing with large amounts of content that these grids can greatly aid our design making decissions…

My point is the same as many others… be sure to experament in your designs and not limit yourself just because your grid says it should be so. Risking being too cliche, “think outside the grid” and change it up sometimes.

Both, http://gridulator.com/ and http://thesquaregrid.com/ are positive resources to help us experiment with alternative grid systems, but ultimately it might be more effective to throw the grid out at times. My 2 cents.

Erick Cardoza
Oct 1, 2010 at 12:30 pm

From a rapid development perspective, I love working with css grids as it allows me to put layouts together quickly.

I’ve tested the 960 grid system but it didn’t work so well for me. I also tested the blueprint grid and I have to say I liked it much better since the columns are actually smaller, 40px columns to be exact (width: 30px; margin:10px;) which gives me a lot of flexibility with columns, gutters and so on. Sure it contains a few more lines of code on the css file, but for the functionality and flexibility is worth it in my opinion.

of course for production we should be compressing all css anyway so the reasoning behind too many lines of code or large files should not be an excuse to throw away good development tools.

Anthony Alexander
Oct 1, 2010 at 6:41 pm

I’m making a css framework called css++ because all these css grids do is lock you in to one developers impression of what a layout should look like and i’ve been appalled ever since i realized that centering was standard. boohoo.

Rushan Mashoor
Oct 2, 2010 at 3:21 pm

For the first time last week i used the 960 Grid framework, it wasn’t easy to grasp. I don’t think i’ll want to stick to it. Will be checking out the new 978 grid.

dlare
Oct 2, 2010 at 11:07 pm

i must agree with @bcarter et al. grid must be used as a guide rather than a rule. i do use 960 grid as a guide but will surely take a look at 978. thanks for sharing!

Hassan
Oct 3, 2010 at 2:10 pm

I don’t like all these classes. I use simple class names: one-half, one-third and one-forth, More column is not necessary. more complex layouts probably need to be hand coded.

Thiago
Oct 4, 2010 at 7:00 am

Very like…….

John Paul
Oct 4, 2010 at 8:27 am

Looks fine to me ,thanks for posting !

Taylor
Oct 4, 2010 at 10:07 am

Interesting post. At first you pissed me off, but you’re right. Thanks for taking the time to stand up for your point. I can dig it.

menecio
Oct 4, 2010 at 11:10 am

960.gs can be customized to modify the grid width, also there are two classes to bypass left and right margins (alpha and omega)…

and Yes, you’re not a grid scientist!

Richard Kotze
Oct 4, 2010 at 5:39 pm

I totally agree with your conclusion. Designers do restrict themselves too much to the 960gs and I think its time to move on to a wider grid. Even on mobile devices the screen resolutions are becoming higher, allowing for a larger area to design in. It just make sence! Nowadays websites should be more adaptive because the can be accessed by different devices – so a mobile version of the site should be made if a site is accessed by mobile device – rather than tring to make one site fit all.

Thiago
Oct 4, 2010 at 6:47 pm

That’s pretty cool because we no longer need to have to stay put table, or putting several divs and code would be great ….. congratulations for the post, I’m from Brazil and I’m always learning more from you

uws
Oct 4, 2010 at 8:20 pm

im lost

Erik
Oct 5, 2010 at 3:06 am

Really interesting, I’m worked with the 960 grid alot (not too strict), but ran into the issues you mention here. I definitely will give the 978 a try!

Nick
Oct 5, 2010 at 3:53 am

10x for the info!

I see the 960.gs website, but where I can find this Simpler 978px Grid ?

Thanx

Gordon
Oct 5, 2010 at 8:46 am

Hi – I thought this was a really good post, and made up a quick zip with your CSS and a Photoshop template. You can grab it here (Mediafire).

kelly johnson
Oct 5, 2010 at 9:09 am

Nice. Although, why use a grid anyway? Coding from scratch gets only what you need and no extra classes, divs or margins that are either not needed or wanted.

I completely understand using a grid system, but when designers use a grid system for website design, despite the opposite, things tend to look blocky and always symmetrical so I would use a grid every-now-and-then but not hamper creativity by always constricting oneself to a grid understructure.

mbhayes
Oct 5, 2010 at 9:14 am

In reading all of these comments… did “we” decide/conclude that 978px was good or bad for mobile, ipad, this that, etc.?

Personally, yeah all the grid stuff is good for framing stuff… but sure by all means experiment and “think outside the grid” when and wherever necessary. I grid and hand code!

cesar
Oct 5, 2010 at 3:06 pm

e geniale questo sito…congratulation!!!!

Crssp
Oct 5, 2010 at 3:45 pm

Just crunching-ch-ching some numbers and 56px grid x 26px gutter x12 columns works out pretty nice.
Comes real close to 960 pixels (958).
Using all of the above logic and classes, it works out handily.
I just like 56px it factors better, and 26 is easy to remember 56/26 both end in 6 :)
Nice little grid calculator here:
http://www.designbygrid.com/tools
to cr-crunch your own.
Thanks for the CSS logic Nick, not that there’s anything wrong with 978.

Crssp
Oct 5, 2010 at 5:16 pm

OK already flip flopped, the math is easier using 50px columns x 32px gutters = 952 total to come in under 960px.
Can’t wait to work with this and use my other standard base styles.
A personalized framework to taste and per project for the nay-sayers :)~

Robbin Thorat
Oct 5, 2010 at 11:32 pm

Hey, great post – I am a web designer and developer, on a day-to-day basis I work in a variety of projects for a broad range of different clients all wanting different styles. Recently I designed a minimalist website for one of my clients which looked great…

Richard Turner
Oct 7, 2010 at 2:45 am

Get it .Thanks man :)

Ben
Oct 7, 2010 at 12:03 pm

Thanks Nick. This is a subject we’ve been following on your blog over the past few weeks and you really inspired us to embrace it, the next few designs coming out of FHOKE will be certainly be using the new grid. We’ve even made available the PSD file for designers like us to download. Come have a look http://www.fhoke.com/blog/2010/10/07/new-978-grid-system/

Brian
Oct 7, 2010 at 3:53 pm

How exactly does the 960 grid hinder your creativity any more than a 978 grid… they both have equal amounts of columns… sooo…

akud
Oct 7, 2010 at 9:42 pm

my comment got eaten. Anyway I wanted to say that it’s nice to know that someone else also mentioned this as I had trouble finding the same info elsewhere

Tulsa Web Design
Oct 8, 2010 at 10:15 am

Thanks much sir!

Leonidas
Oct 8, 2010 at 10:18 am

While you make some valid points, your aversion to the golden ratio is not too cool. All the best designers (and, for that matter, artists) throughout history have used golden proportions in their work.

Mohammed
Oct 11, 2010 at 7:28 am

I don’ want to post a comment, but you are just an artist. well done

Brittany
Oct 11, 2010 at 7:44 pm

While I am a fan of the golden ratio (as almost every designer should be) I agree that going by set numbers that “fit” into the layout is restricting on the web. Fluidity should be kept in mind, but being flexible is also important!

Hassan Mehmood
Oct 12, 2010 at 5:36 am

Do I have to LOVE this grid system & Is it really important to follow this??? I really want to know!! I’m a designer[basically] & also code wordpress themes[my own designs only] from past 2 years I design my websites at 1010px without any grids. One of the example is

http://www.breakupwithsugar.com/

Do You think following grid system can change my life & what are the advantages. =)

Thanks

Joe
Oct 12, 2010 at 7:50 am

Hey, I am not sure if you know about the custom grid selector, within the 960.gs – http://www.spry-soft.com/grids/. You can choose whatever gutter width possible, and choose any column size. You can derive anything that you want.

And removing the margins is just one line of code! I might be wrong, but I do not see any convincing argument to move away from 960.gs.

Ricardo Zea
Oct 12, 2010 at 4:02 pm

Something funny: You say “Don’t force your design to fit to a grid that hinders your creative genius.” but yet you are proposing a grid. xD

Now, here’s something that you’re misinterpreting: the inclusion of a .clear class.

The fact that the .class is in the 960 CSS file, doesn’t mean you HAVE to add a DIV to clear the floats, so the example graphic above where you have an empty yellow-border DIV, that doesn’t necessarily has to be the exact and only way you would use .clear class. I think your opinion on this point is not objective, but more subjective.

Nevertheless, your 978 grid system looks interesting and will definitely give it a try.

Thanks.

Ricardo Zea
Oct 12, 2010 at 4:05 pm

Correction (there’s no way to edit your post here :s):

Third paragraph, I meant: “The fact that the .clear class is in the 960 CSS file…”

LC
Oct 12, 2010 at 5:14 pm

Well it’s funny because sometimes I find the 20px gutter *too wide*, but never too narrow.

Chris Murphy
Oct 12, 2010 at 10:02 pm

Grids are great if you’re not a slave to them–I like the 960gs, but I tend to agree that there are way too many classes that are required to make a layout work. From a design perspective, gutters should be as flexible as possible otherwise every design will start to look the same. Let’s not forget about the typographic control that a grid should help with, setting an adjustable vertical rhythm is important.

Kay
Oct 13, 2010 at 6:38 am

I have been meaning to look at this for ages now but never get round to it. Thank you!

Bye bye unwanted margins and hello extra space :D

I don’t suppose you have a Photoshop grid template to go along with the CSS code? :)

Rob Hiffy
Oct 13, 2010 at 11:09 am

thank you – this is gonna help me out loads!!

Chris Southam
Oct 13, 2010 at 12:45 pm

In case anyone is interested, I’ve turned this into a LESS.js version:
http://pastie.org/pastes/1218682/

bob
Oct 13, 2010 at 8:58 pm

you guys are so totally right.
I came up with the same conclusion on the 960.gs technique.
but i guess i was too lazy or not bright enough to come up with an alternative myself.

Here we are!

thank you guys, great work!

Jeff K
Oct 14, 2010 at 2:08 am

I use the grid systems as a template for laying out my design. I don’t like or use the CSS of any grid system as I don’t like my classes to describe their layout, only their content. So instead I use the grid size values as guidelines for the widths and spacing of my containers.

This is interface development vs website design though.

Flavio
Oct 14, 2010 at 3:00 am

We are ever looking for a way to accelerate our work, but sometimes we limit our creativeness with grids and templates, despite they are a good way to start. We need rules to a good design, and we need results. Balancing the creativeness and rules is a hard and funny task.

Kay
Oct 14, 2010 at 6:01 am

Great post! Do you have a 16 grid version?

TOLS Multimedia
Oct 14, 2010 at 7:31 am

It’s great to have the grid section details which you have provided in the pictures. I like the way you have explained the grid in pixels and giving the whole css code settings. keep going…

Lisa
Oct 14, 2010 at 10:32 am

Interestesting article. We use the 960 grid and always have to tweak the left and right margins. This is a good alternative.

flexible boru
Oct 15, 2010 at 1:14 am

css grid very easy thank you admin..

sutton coldfield web design
Oct 15, 2010 at 3:14 am

Great tutorials and tips, thanks! I always read web design wall’s blogs and find them very helpful

Charles Henri
Oct 15, 2010 at 8:48 am

I really enjoyed the first post on the 978 grid. I had been looking into moving away from the 960 for awhile for exactly the reasons mentioned, and especially the one about the 20 pixels gutter being too narrow. I downloaded myself a 978 grid and intend to use it in future projects.

Spokane Web Designer
Oct 15, 2010 at 10:38 am

I still like the 960 grid system for my websites.

Teramonk
Oct 15, 2010 at 11:05 am

Still haven’t decided on “old” or “new”, but your presentation and article were very good. Keep up the good work. Thanks.

jake
Oct 16, 2010 at 1:08 am

your article very good !

Tiyo Kamtiyono
Oct 16, 2010 at 7:40 am

Interesting thought, I also never mind to use 960 grid system to my design, I feel that if I use it, the margin in both side is too wide. I prefer to use 980 px width lay out for my design.

Nori Takahashi in Japan
Oct 17, 2010 at 11:20 am

Please let people in Japan introduce it because it is a very wonderful solution.
Please forgive the introduction of this article by my blog.

Regis Zaleman
Oct 17, 2010 at 1:52 pm

Very good ideas. Even though I haves used 960gs quite a lot, I always was bothered by the gutter width and extra classes. Using a grid system is a great help for getting an HTML page to work quickly, but should be cleanned up for the production version. All classes that are not used should be deleted (or better, commented out if you use something like LESS CSS’s desktop compiler which takes the comments out of the production code). In addition to removing some unused classes. We can also see what CSS properties can be condensed to make the code event cleaner… Grid systems are starting points, not final production ready code.

изработка на сайт
Oct 17, 2010 at 4:44 pm

960 is a great tool, but honestly I prefer square grid, as it gives me more space and is more flexible.

Web ninja Wannabe
Oct 17, 2010 at 8:29 pm

imho, both grid systems are good and 960gs didn’t have to die. It’s better coz designer will have many options to choose from :)

Chris
Oct 18, 2010 at 4:22 am

I read both articles and I think that first it depends on the project and a designer can use both and adjust them to his needs.

Lucas
Oct 18, 2010 at 9:15 pm

Very interesting concept and it validates in html too because you are using different classes.

Tim Inman
Oct 19, 2010 at 4:37 am

I like it and I am using it in a new site, thanks! I like that it uses ‘first’ at the beginning of a row instead of ‘clear’ and the end – it’s more straight-forward.

Bohyme Hair
Oct 19, 2010 at 6:43 am

They look gorgeous at my page/…

Shibani
Oct 20, 2010 at 1:57 am

Interesting. Should try this soon :)

Theo
Oct 20, 2010 at 4:27 am

The grid system is very helpful, nice article !

Evan Skuthorpe web designer
Oct 21, 2010 at 10:54 am

I’m new to this 960 system with a job on working on now. I’m confused as to whether there is a set standard 960 template to use or I just code place holders to those dimensions…

Matt Clarkson
Oct 21, 2010 at 11:44 am

.container {
width: 978px;
margin: 0 auto;
overflow: auto;
}

And you don’t need any of the clearfix stuff. Much neater HTML markup then.

Aragorn78
Oct 22, 2010 at 10:32 am

Totally agree… often had to had an extra left column, padding that made the content even smaller… 960 is good, but I am definitely going to give a try to the 978 grid to see if it saves me the extra tweaking time in 960…

Practice will be the judge.

Thanks for talking about this issue. Now I gotta convince the developper team :))

gustavus
Oct 22, 2010 at 7:19 pm

could you provide a transparent image to use in creating photoshop comps?

Edmundo Junior
Oct 25, 2010 at 7:21 am

For those who asking for the 978 grid PSD but are too lazy to DIY, I made one with all the rules and a background image.

You can download the PSD at: http://cl.ly/2yB2

I like this grid, I think it’s better have a 30px gutter than a 20px, and the lack of container padding/margin is good too.

Hope you like :P

w3spor webdesign
Oct 27, 2010 at 8:29 am

Interesting solution! I’ll try it out :-)

James Beardmore
Oct 28, 2010 at 11:10 am

Seriously though. Why should we be coding centered layouts with fixed width when we can make responsive designs that look good on everything from a 1900px screen to an iPhone? If you don’t know what I’m talking about google Responsive design and read the top ALA article.

We should be moving things forward instead of trying to fix a method that no longer fits the job.

宝宝早教
Oct 28, 2010 at 8:29 pm

Practice will be the judge.

意美
Oct 28, 2010 at 8:29 pm

The grid system is very helpful, nice article !

meghan
Oct 29, 2010 at 11:06 am

Every web designer should be using the 960 grid it to create website layouts. Thanks for posting this article!

Tech2connect
Oct 30, 2010 at 3:56 am

I like your solution i will try it thanks

malaysia web design
Oct 31, 2010 at 2:30 am

i like your opinion “Don’t force your design to fit to a grid”…thanks for sharing….

怎样减肥
Oct 31, 2010 at 10:10 pm

效果不错哦.

POG
Nov 1, 2010 at 3:26 am

it’s really cool article’s thanks so much…!!!

web design newcastle
Nov 2, 2010 at 3:41 am

Maybe getting old, but still a great solution :)

Phil Ricketts
Nov 2, 2010 at 6:22 am

I don’t like how the golden ratio is mentioned, because it isn’t the golden ratio at all! :)

1.618…

SuKai Web Design
Nov 2, 2010 at 10:16 am

I like the idea of “golden ratios” but find it hard these days to apply any sort of template grid to a new website, often i just need to start from scratch, pen and paper and work it all out!

The Hoff
Nov 2, 2010 at 11:53 am

Simple CSS Grids! Oh Yeah!

Chat
Nov 3, 2010 at 4:18 am

One of the more successful the work of your blog, thanks iked

Accelerant Design
Nov 3, 2010 at 11:59 pm

This is great. I’m really liking the simplicity.

Accelerant Design
Nov 4, 2010 at 12:03 am

This is great. I really like the simplicity.

klima servisi
Nov 6, 2010 at 3:07 pm

klima servisi, kombi sevrisi hizmetleri veren web sitesi.

purrpelle
Nov 6, 2010 at 6:56 pm

yes! makes so much more sense to use the 978gs. thanks!

Erick
Nov 12, 2010 at 4:48 pm

so I have to open a container for every new row? for example
[code]

[/code]
because when I don’t it gets messy..

chat
Nov 14, 2010 at 7:48 am

Maybe getting old, but still a great solution :)):)

Anselm Marie
Nov 14, 2010 at 6:32 pm

I’m looking to up my design skills and this grid will definitely help me. I also agreed that you should make padding in the container and not have additional columns.

Andy
Nov 15, 2010 at 6:40 pm

while I can appreciate the use of grids, you cant beat good old hand cranked code. As a designer you should have the ability to create sites which fit the customers needs and requirements.

Why dont people be creative and use their imagination rather than using grids and making copycat sites.

Catia Ormonde
Nov 17, 2010 at 6:16 pm

Awww… But we all love CSS… <3

Luke Sheppard
Nov 19, 2010 at 8:05 am

I’m amazed that everyone still gets so uptight about suggestions regarding the 960px grid. Surely, as designers, we should be pushing the boundaries of what is possible a little bit more??

Yes, it makes life very convenient for designers and it’s possible to produce some gorgeous looking sites using the grid. With the popularity of widescreen monitors now though, anyone still restricting their designs to 960px is really missing a trick.

arneljethro
Nov 22, 2010 at 2:05 am

it will definitely make a good designer better! all useful tools shoud be utilized to make the design more attractive at the same time cope up with the demands of its audience! Good designers have to visit http://www.bidstornado.com, and see how much you can earn :)

Diseño Web Mexico
Nov 22, 2010 at 4:41 pm

I will definitely follow these guidelines for my next websites. :)

Hannes
Nov 23, 2010 at 4:03 am

I did a minimalistic generator for this type of grid. You have to play with the parameters in url.
940 grid
http://www.hanneskirsman.com/978.php?total_width=940&cols=12&gutter=20

978 grid
http://www.hanneskirsman.com/978.php?total_width=978&cols=12&gutter=30

Also, no rounding is done. I don’t know how well browsers handle commas so it’s easy for you to see if things don’t quite measure up if margin is 2 meters long.

ps. there’s nothing interesting on my homepage.

Hannes
Nov 23, 2010 at 8:20 am

And if you do http://www.hanneskirsman.com/978.php?total_width=100&cols=10&gutter=1
You allmost get nice floating grid. Just replace px with %.

There’s something to note about though. When nesting divs with floating grid and without making changes to the current css, you have to think relatively. You’d think that making 2 even columns in grid8 div needs 2 grid4 divs. But no. You have to have ~50% divs which in current example are grid5 classes.

premier pixels
Nov 24, 2010 at 2:57 am

I find your solutions very convenient.Thanks for sharing.

Topandesign
Nov 24, 2010 at 9:34 am

for now I have not used the grid element, but after I saw this tutorial may in the future I will start using
thanks

Hannes
Nov 25, 2010 at 9:26 am

Bad news, folks. It breaks in IE7 and IE6 if grid cells have different heights.

Check it here http://www.hanneskirsman.com/940fail.html

Modified one cell and added breaks:
<div class=”grid3″>
grid3<br /><br />grid3
</div>

God damn MS…

So we’re still back with div clear.

Hannes
Nov 25, 2010 at 10:00 am

But I guess you could do this with jQuery:

$(“.first”).before(‘<div class=”clear”></div>’);

josé malo
Nov 25, 2010 at 7:56 pm

Thanks for the tips, it will help me a lot…

Designing Mall
Nov 30, 2010 at 4:50 am

Informative and simple post. if some one read n practice can learn a lot…

Web Designer from Poland
Dec 1, 2010 at 8:10 am

Valuable post here. 960 is a little bit to tight. You have the point :)
Cheers!

Jrutlanddesign
Dec 2, 2010 at 3:37 am

thats a great post, ive never been a massive fan of the 960gs, it a good tool to help out in the layout, but using the css can be far to much hassle for what its worth.

Prakash
Dec 3, 2010 at 9:30 pm

Excellent & informative post. I think these guidelines are be convenient to perform better & for the best designs. I will follow these tips for my upcoming projects. Thank you so much for your simpler solutions.

http://www.freecssshowcase.com/

Take time to review the above link for more design inspiration & for the CSS templates.

Mike Sinkula
Dec 8, 2010 at 10:26 pm

I like a 55px column with a 20px gutter and margin better than the 960.gs for small business clients.

Website design
Dec 15, 2010 at 3:39 am

Like!
:)

Website design
Dec 15, 2010 at 3:40 am

As usual, a fantastic post – keep going! I’m saying thanks from the thousands who enjoy your blog and don’t say anything!

Shrikrishna Meena
Dec 17, 2010 at 2:40 am

I’ve never used 960 grid system but downloaded it’s one copy from 960.gs… And I think ‘design boundaries’ makes our design look more professional Instead of being a day to day road romeo.
But, Sometimes it’s good to break such boundaries.

Fredrik
Dec 22, 2010 at 12:10 pm

Hey,

nice thinking i always have hated the margin space! We’re going to try this out in our next project! Many thanks Fredrik

led ekran
Dec 23, 2010 at 3:03 am

Thanks for the tips, it will help me a lot…

Henry Peise
Dec 24, 2010 at 5:12 am

Enjoy the christmas time and enjoy the hottest white iphone 4. All you need to do is the white iphone 4 conversion kit home.

Juno Mindoes
Dec 25, 2010 at 2:53 am

It’s sorry to hear that Some white iPhone 4 buyers have reported signal reduction when the phone is held in certain ways, especially in the left hand, as the antenna problem is in the bottom left corner of the phone’s side casing. Is that mean i have to wait longer to get the white iphone 4?

oky
Dec 27, 2010 at 10:59 pm

thanks… i can use it in my project

juegos de mario
Dec 29, 2010 at 6:21 am

thnx, it has been an inspiration for my new design

Jessamyn
Jan 4, 2011 at 1:38 am

I’m having a problem using this grid with a background image. My image is 978px wide, so the text is flush left along the left edge. Any suggestions?

wei
Jan 4, 2011 at 3:33 am

Dolce Gabbana ,dolce and gabb

D&G leisure shoes are famours far and wider for their unque technics,dolce gabbana Sunglasses. Plain mirror,exquisite shape,brihgt color and rich culture.Vibrate the massagr function,can promote the blood circulation,Dolce Gabbana watches,improve Metsbolism,Dolce Gabbana Clothes,ream massage more comfortable valid.Paid no mean amount for the shoes,antibacterial function,dolce and gabbana men sneakers,quality of soft,comfortable and fashion.

Ven Francis | Web Ninja Wannabe
Jan 5, 2011 at 1:23 am

hey nick, is the .psd file available for download?

Mike
Jan 6, 2011 at 12:38 am

There’s a pretty nice utility over at zurb playground, they have a lot of cool little nick-nacks there.

Shane
Jan 8, 2011 at 6:43 pm

Thanks for this Nick! I have been following your work for years. You are always providing such great content. This article definitely falls in that category. I will most definitely be using this in the near future.

Grudknows
Jan 11, 2011 at 4:20 am

I like to peep at the grid system generator from time to time to see what’s new/different – http://www.gridsystemgenerator.com/.

I adjusted the 960.gs right from when I started using it to eliminate the gutters – I mostly used a 24 column version of the 960.gs. Will have a look at the simple grid.

Uçak Bileti
Jan 11, 2011 at 4:56 pm

css grid ler oldukça iyi ben şahsen begendim

Michel Reye
Jan 13, 2011 at 8:23 am

Excelente sistema de grids, he dejado un proyecto hecho con el 960 gridpor la mitad para probar este de 978 y los resultados en limpieza de codifo han sido fenomenales. Me gustaria que lo pudiesen hacer para 24 columnas.

Ben
Jan 15, 2011 at 3:32 am

Today is too precious, should not worry for acid bitter and astringent regrets that dissolve, raise the chin, seize today, it never comes back.

Webdesigner 4 Drupal
Jan 20, 2011 at 2:56 am

I totally agree with you here, 960grid has been a great help to my projects. But the things you use as arguments where the ones that i kept thinking should i just leave the grid system aside because of the many bigger resolutions these days.

Though when reading your title of the post i hoped you somehow came up with a grid systems that works with a flexible layout, but it is some what that. Only still restricted to some degree of with of the container. Do i defintly start using it.

I suggest you two can make some sketch templates to, because thats where 960 rocks too. You can sit with your client and have a mockup in no time.

So please add the css and sketch tempalte in the download file too.
Keep up the good work.

Martin Gartner
Jan 20, 2011 at 5:52 am

I really like your simple 978px grid solution!
But I have one question:

How do you handle the SEO problem where main content should be placed before the site menu in html source?

Example:

Lets say we have a very simple layout using two cols: grid2 for menu-column and grid10 for content-column

Optically the menu col should be on left side and the content col on the right. In html source the content-column should be placed before the menu-column. But this breaks the grid system.

Can this be done with the 978px grid?

Thanks,
Martin

Rodrigo Ribeiro de Abreu
May 27, 2011 at 1:32 pm

Think of a simple html document that will never have a css. Do you think the menu should realy be after the content? I think that, doing so, you are putting more importance to SEO instead of your user.

Felipe
Jun 15, 2011 at 5:55 pm

The menu can come after in the markup while still showing first in the rendered result. Take a look at http://matthewjamestaylor.com/blog/perfect-3-column.htm as the main column is displayed in the center even though it comes first in the markup. A simple grid system won’t accomodate this SEO friendliness out of the box, but I think that a mixture of classes could well work for that… But maybe this is impossible… Or next to…

Webdesigner 4 Drupal
Jan 20, 2011 at 6:18 am

I think, the placing of you content with seo is importent. But if your website is simpel there isn’t much code and data that will disturb the indexation.

If you have a big community the you should definitly consider that stragegy.

zach mathews
Jan 22, 2011 at 12:37 pm

I think I will start using the 960gs and 978gs. I just learned about them today.
Mine didn’t have any organization before.

CuPliz
Feb 4, 2011 at 8:06 am

Hi Nick,
Thanks for the tips! You have inspired me to make my own grid system — 984gs!
@Jessamyn
You may to put your background image on tag

Ralph
Feb 13, 2011 at 7:10 am

A new and alternative way in the grid system.

Uçak Bileti
Feb 16, 2011 at 9:09 am

its hard to say that your post is usefull. but way better than others :) thx

Crssp
Mar 2, 2011 at 6:09 pm

I’ld love to see this get adapted, or is it adopted… ? :)
With people making layouts and sharing them.
Esp. moving towards html5 new style layouts.
Seems like a great starting point for anyone to make their own front-end framework, no license required ;)

-crssp

Crssp
Mar 3, 2011 at 12:43 pm

What about the Prefix and Suffix classes of 960.gs, plus a full width sample in the mix of the demo would be nice, just for more examples.

thanks again.

sumomax
Mar 21, 2011 at 5:36 pm

is not easy to put on weight

Marcy
Mar 30, 2011 at 11:38 pm

When I looked at this earlier, I missed the “clear:left;” on the .first class. That is so amazingly brilliant! Thanks.

dexx
Apr 17, 2011 at 1:08 pm

Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.

Kaare Roager
May 22, 2011 at 4:20 am

This grid is very usefull for designing website with more invisible design. (Smashing book 2)
Thanks for sharing!

John
Jun 1, 2011 at 12:17 pm

nice article, thanks. I’ve just started using the 960gs recently, guess ill give this a try now instead :D

Mont Blanc Pen
Jun 13, 2011 at 9:31 pm

What is friendship?Mont Blanc PenWhy do we call a person our friend? When do we call someone a very good friend?

Josh
Jun 14, 2011 at 3:08 pm

I like grids because it keeps content clean and streamlined. However, when wanting to use background color within the containing divs, that’s when it can get tricky. Many times adding margin/padding will break the grid layout.

web designing uae
Jun 16, 2011 at 3:25 am

The simpler css grid – Thanks for the info.

Ad
Jun 26, 2011 at 7:54 am

I would like to see someone come up with A solution that makes alpha, omega an clear, or even .first, completely unnecessary. Because, with responsive web design, your grid blocks might flow totally different… I now have to use scripts to dynamically correct the classes on those elements, but i do not want to! Or would it be better to not use margins for guter, but padding…

earlofbrigand
Jul 14, 2011 at 4:44 pm

I’m new to all of this (web design), but have already decided to use the fibonacci sequence as a guide. The gist being that the size in px of each element is a fibonacci number.. 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597 being (in practical terms) the first numbers in the sequence.

Elements made from combinations of these numbers just look .. well, aesthetically pleasing really. The golden mean and all that.

orhanbt
Jul 15, 2011 at 4:20 pm

this is verry good.

ejita karim
Jul 17, 2011 at 5:13 pm

Very nice blog.. i love your blog and its design is fantastic

Lucas del Río
Jul 18, 2011 at 5:53 pm

Great! I’ve used 960gs for my website and felt that it was pretty messy with all the classes and stuff. I found instead, this system really clean and useful, taking the design to the same result. Simply great work here! Thanks for sharing it! I think I’m going to redesign my website using this system =)

Diseño web Mexico
Aug 17, 2011 at 6:29 pm

You are right. I think this point is more clear if you compare it to print design. Imagine that a huge amount of print designers use evertime the same grid, no matter which format of paper etc. That would be weird and boring. So thanks for the great article which explains nice how to make a difference!

deneme
Aug 22, 2011 at 3:36 pm

hello it is very good thanks

complex 41
Aug 23, 2011 at 10:05 am

And then he handed you the thirty-five 55

complex41
Aug 23, 2011 at 10:38 am

And then he handed you the thirty-five 45

Eleonore
Sep 3, 2011 at 2:33 am

Thanks , I have recently been looking for information about this subject for ages and yours is the greatest I have discovered till now. But, what about the bottom line? Are you sure about the source?

Unigtre
Sep 15, 2011 at 12:19 pm

I wish to show thanks to you just for rescuing me from such a scenario. Because of checking through the world wide web and seeing techniques that were not powerful, I was thinking my life was over. Living minus the approaches to the problems you’ve solved by means of this post is a crucial case, and the ones that would have in a wrong way damaged my entire career if I had not discovered your web site. Your good capability and kindness in handling every part was invaluable. I am not sure what I would have done if I hadn’t come upon such a step like this. It’s possible to at this point look forward to my future. Thank you so much for this reliable and results-oriented help. I will not be reluctant to propose your site to anyone who will need guidelines on this situation.

Web Design dubai
Sep 21, 2011 at 2:33 am

your simpler css grid is really superb. You are very good in explaining things. good job

Mesothelioma
Sep 24, 2011 at 4:11 am

Your grid blocks might flow totally different this system really clean and useful. It’s possible to at this point look forward to my future.

pakman
Nov 4, 2011 at 7:07 am

Just use 1140px Grid system -> cssgrid.net

gavin
Nov 4, 2011 at 7:46 am

Can this be made into a 16 col grid?

Diseño web Perú
Nov 16, 2011 at 2:39 pm

Hola esta muy bueno, muchas gracias…

Denis
Dec 6, 2011 at 3:27 am

Hi,
looks nice. But are there any tutorials how to use the grid. I am not so familiar with grids.
A simple layout would help.
Cheers,
Denis

Ryan
Jan 4, 2012 at 2:53 pm

I’ve been looking for a simplified way of thinking with these css grids and finally found just what I was looking for in this article. Thank you very much.

Evan
Jan 17, 2012 at 11:29 pm

Most of these comments are meaningless. Good thing that WDW has implemented nofollow. Spammers take note.

Alberto "Raben" Macaluso
Jan 25, 2012 at 11:31 pm

I’m sorry but this system is now obsolete! :) Now we need to start using the responsive design…
and what do you suggest to us about this “new method”?

Dee
Feb 21, 2012 at 1:11 pm

If you go to http://cssgrid.net/ it’s a pretty good system.

Troy
May 16, 2012 at 6:06 am

Responsive designs are terrible. Why on earth would you want to render full images to run full code on mobile devices? Granted, it may work on some sites, but anything serious will not want to use a responsive design.

You are far better using m.domain or similar. Hense why any good site will do just that.

Nate
Jul 18, 2012 at 9:49 pm

I’m sorry but you don’t understand responsive designs.
They don’t render full images, or run full code they scale.

They start with a mobile first design (less code) and add upon that.
Personally I think it is foolish to not make your whole site mobile – it will be increasingly common for your site to be checked by mobile devices.

The images are dynamically scaled – so it loads the right images for the right screen.

Rob
Aug 19, 2012 at 5:10 am

@Troy

I disagree with your statement that a special subdomain with a spearate website which is optimized for mobile devices is the best solution.

Nobody wants to maintain an entire website twice, right?

To work on two content-management-sytsems (which most clients want) is just a waste of time. Time nobody has (at least my clients tell me that they have no time).

And Google prefers mobile devices and advices not to have two URLs and two websites with the same content.

https://developers.google.com/webmasters/smartphone-sites/details

Good sites, as you call them, are responsive.

andrew
Jan 26, 2012 at 7:38 pm

I’m sorry but all the css frameworks sucks, I better start from zero, every project is different

Griz
Apr 5, 2012 at 9:01 am

Nice!

This article inspired me to create a tweaked, smaller version of the grid that can be easily added to an existing WordPress theme :

http://computingvoyage.com/1240/a-simple-css-grid-for-your-wordpress-theme/

Posicionamiento web
Apr 26, 2012 at 11:20 am

Hola, muchas gracias por el post, si que esta interesante.

Slds…

Jake
Jun 6, 2012 at 9:32 am

I made my own custom css grid, depending on the desired width.. what i did is i pick some of the css coding/technique in 960 grid and innovate it.

Burby
Aug 7, 2012 at 2:07 pm

I’d like to point out the significance of your conclusion and repeat it over and over. Let’s try to escape the out-of-the-box mentality and design layouts and grids according to the content and the job at hand. Force feeding content into a grid-package may be easy, but in the end, it only hurts the design. And the client. And my heart. And it makes my cats howl strangely at night. :/

Dymo Labels
May 31, 2013 at 2:23 am

hello sir
i really need for simpler CSS grid
thanks for sharing
thanks

diseño web
Jun 1, 2013 at 12:53 pm

your simpler css grid is really superb. You are very good in explaining things. good job

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.