Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have my own grid layout, and I am creating multiple column designs for a website. Is there any formula I can follow to create different column designs with identical gutter space, ie. margins?

Most are the alike, (through trial and error), however some are a pixel off and I am looking to make it pixel perfect.

share|improve this question

migrated from stackoverflow.com Feb 27 '11 at 7:49

This question came from our site for professional and enthusiast programmers.

If you use CSS (margin, padding, etc.), the browser will do all those calculations for you. – Seth Feb 26 '11 at 19:56
By "identical gutter space," do you mean pixels or percents? – sdleihssirhc Feb 26 '11 at 19:57
@sdleihssirhc pixels. @Seth I reset my margin and padding to 0 to create my own. – Twinborn Feb 26 '11 at 20:02
So just to be clear, you're asking about an equation where you give it the size of each gutter, the number of columns, and the total size, and it gives you the width of each column? – sdleihssirhc Feb 26 '11 at 20:05
Yes, that would be exactly what I am looking for. – Twinborn Feb 26 '11 at 20:11

Based on sdleihssirhc's description, without outside gutters:

columnWidth = (layoutWidth + gutter)/columns - gutter

With outside gutters:

columnWidth = (layoutWidth - gutter)/columns - gutter

Though if you're going with your own grid design, it's easier to just add it up, e.g.:

columns = 3
columnWidth = 280px
gutter = 50px
gutters = 2
layoutWidth = 3*280px + 2*50px
  = 840px + 100px
  = 940px

Alternatively, just build from columns without gutters and then subtract out your gutters:

layoutWidth = 960px
columns = 3
_columnWidth = 320px
gutters = 30px
columnWidth = 320px - 30px*(4/3)
  = 320px - 40px
  = 280px

This way you don't get weird numbers like 293.33333333px.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.