# Math to create web design grids?

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.

-

## migrated from stackoverflow.comFeb 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.

-