Grids, margins, gutters etc. How does it work?

[Aimee]

In today's class on the first slide (well the one after the cover slide) there's the following example:


Example of a 12 column grid based on a 960px wide page with 20px gutters and 10px margins.So I am trying to implement a part of this on my project website and I chose to set my main content to 540 and sub-content to 360 using the grid. Does that mean that I need margins of 10px on either sides of the div giving me 10 + 540 +10 +10 + 360 + 10 which is 940 leaving me with 20px that I need to add somwhere - but where?

So my question is what's the difference between margins and gutters?

Thanks in advance.!
Aimee

[Priscilla]

Hi Aimee,
I was asking myself the same question - still getting my head around the basics of setting up a grid. It seems that the gutters are the space between the columns and the margins are the spaces on either side of your whole grid. I found this out whilst the reading the following Smashing magazine article, which came up on RSS feed on the forum. http://www.smashingmagazine.com/2011/11/09/establishing-your-grid-in-photoshop/
If you look at 'Method 1', the diagram explains this. I'm going to download 'GuideGuide' and try using it in Photoshop.... tomorrow! Let me know how you get on too :)

[tomjeatt]

There are some really useful templates/examples here:
http://960.gs/

[Priscilla]

Thanks Tom, have opened up the 12 column grid from 960.gs in Photoshop. But it doesn't have any horizontal lines ('baseline grid?') I gather you have to set those up yourself in PS, based on the leading size of your main text - is there an easy way to do that?

[Aimee]

What a well timed article!

I suppose I also need to add padding and this will add pixels to my total count.

Thanks both.

Aimee

[Aimee]

I seem to have read the grid wrong last night and have found the additional 20px!

[tomjeatt]

But it doesn't have any horizontal lines ('baseline grid?') I gather you have to set those up yourself in PS, based on the leading size of your main text - is there an easy way to do that?

No, I'm afraid not - you just have to add them in! It's easier to do this by using the New Guide option in the view menu than it is to try and drag them into position.