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.
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.
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.
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.
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.
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.
Mutha F laying out in grids. Grids suck and are for lazy people or web pushers. Hand coded, custom, is the way to go.
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.
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.
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.
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.
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!
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.
Very like…….
Looks fine to me ,thanks for posting !
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.
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!
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.
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
im lost
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!
10x for the info!
I see the 960.gs website, but where I can find this Simpler 978px Grid ?
Thanx
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).
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.
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!
e geniale questo sito…congratulation!!!!