+ Reply to Thread
Results 1 to 7 of 7

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

  1. #1

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

    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

  2. #2

    Default

    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...-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

  3. #3

    Default

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

  4. #4

    Default

    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?

  5. #5

    Default

    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

  6. #6

    Default

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

  7. #7

    Default

    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.

+ Reply to Thread

Similar Threads

  1. Work Less
    By Think Vitamin in forum Web Design RSS Feeds
    Replies: 0
    Last Post: 7th Mar 2011, 07:26 pm
  2. Float Left - Grids
    By David in forum Design
    Replies: 5
    Last Post: 6th Dec 2010, 02:22 am
  3. Equal Height Column Layouts with Borders and Negative Margins in CSS
    By Smashing Magazine in forum Web Design RSS Feeds
    Replies: 0
    Last Post: 8th Nov 2010, 06:10 pm
  4. Fluid Grids
    By A List Apart in forum Web Design RSS Feeds
    Replies: 0
    Last Post: 3rd Mar 2009, 09:45 am
  5. ALA 235: vertical grids, accessible web apps
    By Zeldman in forum Web Design RSS Feeds
    Replies: 0
    Last Post: 10th Apr 2007, 02:48 pm

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts