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.

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


Use the following CSS code:

/* no media query necessary */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    // nothing about rows

.item {
    // nothing about item placement

Adjust the minmax(100px to your desired setting (what's the smallest column width you want?). The CSS code will do the rest (all the math, fitting as many items as it can in the given width, and automatically adding additional rows if/when needed). You do not have to assign specific locations, everything inside the .container will be placed by the system. Very cool.

I learned this method from Jen Simmon's Labs on one of her Layout Land Video's.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy