Gutters / Grid

[Nocturnes1984]

Goodmorning people,

As a designer i’m diving into the developerworld. Yesterday i bended myself over responsive design & grids.

I like the 1200px grid system but i’m kind of confused what the use of gutters are? Is it for nice alignment of things? How do you decide what the width of a gutter should be. Like now, the full width is 1200px – minus 20px gutters on the side = 1180px. But then there are 15 columns of 60px and gutters of 20px.

Can someone help me understand why this is? How do you pick the right gutter? The right width of column? And can you place things in the gutter as a designer?

Br,
Michael

[Steven]

This is a CSS discussion more than anything.

In any case, gutters are simply spacers between each column. They’re completely optional, depending on your design needs.

The width of gutters is just a matter of taste. I think 20px is the ‘norm’, but don’t feel beholden to that. If you want more room for your content to breath, try larger gutters if you want. Again, this is dependent on what your design goals are.

15 seems like an odd number of columns, why 15? Most grids out there use a 12 column system. I think this is because it allows for a variety of use and is still easily divisible.

For the right gutter/column width, simply divide your container width by your number of columns and there’s your column width, obviously. Then pick whatever gutter width appeals to you, apply border-box so your gutter padding doesn’t mess everything up, and there you go.

[Nocturnes1984]

Well, i’m using http://1200px.com/ – system

12columns on 1200 seem so …big?

[Nocturnes1984]

So lets say i’m going for a 1200width container…with 12columns? That makes 1200width / 12 columns = 100px per column? How do you calculate the gutter then? And how do you know what margin to use on the sides?

[Author]

Posts